I'm trying to get specific value back when I write "h" but it won't, and I don't know why. I have tried searching for the problem but could not find the solution, I don't know if I am just being dumb.
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>BOING</title>
<script type="text/javascript">
function res() {
var a = getElementById("a").value;
var c;
if ( a == f ) {
c = "Hello";
}
else if ( a == j) {
c = "Hi";
}
c = document.querySelector("bleh").value;
}
</script>
</head>
<body class="bd" >
<form class="form" action="index.html">
<input id="a" type="text" name="h" pattern="Write Here" />
<button id="b" type="button" name="button" onclick="res()">Ask</button>
</form>
<div class="blah" id="bleh"></div>
</body>
</html>```
if you want to change text of DIV 'bleh' to respond to user when writing predefined message like Hello or Hi
f="Hello";j="Hi";
function res() {
var a = document.getElementById("a").value;
var c="";
if ( a == f ) {
c = "Hello";
}
else if ( a == j) {
c = "Hi";
}
document.querySelector("#bleh").innerHTML=c;
}
https://jsfiddle.net/rkv88/kjuox029/11/
modification:
1 to put text into DIV element you must use .innerHTML property
2 defined j & f
you can use document.getElemntById("bleh") instead of document.querySelector("#bleh").innerHTML=c;
Related
I am having a problem in my code, I made a very simple newbie type captcha using Javascript the following is the my code.
<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<body>
<h1>Testing captcha</h1>
<hr>
<img id="firstImage" img src="pictureOne.jpg">
<input type="text" id="firstInput"></input>
<button type="button" onclick="checker()">Confirm</button>
<hr>
<p id="cone">Please type what you see in this picture, This is a captcha to prevent over-spamming</p>
</body>
<script>
function checker() {
var checkPic = document.getElementById('firstImage').src = 'pictureOne.jpg'
var takePic = document.getElementById('firstInput').value;
checkPic.toString()
if (checkPic === "pictureOne" && takePic === 'c' ) {
document.getElementById('firstImage').src = 'pictureTwo.jpg';
alert("Please confirm the second captcha");
} else if (checkPic === 'pictureTwo.jpg' && takePic === 'u') {
alert("Ready to download.")
}
}
</script>
</html>
How the captcha will work? Well i tried to make it simple, just like on completing the first captcha the second image will appear and then after finishing that captcha a certain task will be shown. The issue is that the code is not working. I don't know if my condition statements have problem or what so ever please help me. I am stuck in this like for 7 hours.
you have several problems in you code. I first try to fix this problems.
remove unused attribute img from <img id="firstImage" img src="pictureOne.jpg">
remove = 'pictureOne.jpg' from var checkPic = document.getElementById('firstImage').src = 'pictureOne.jpg' to get the real content of element #firstImage instead of setting it every time to pictureOne.jpg
remove line checkPic.toString(). Its not needed (and missing a ; at the end)
use == instead of === because === will test if both sides are the same thing and not only equal. Example: define i=5 and x=5 --> i==x is true but i===x is false and i===i is true
use .endsWith(" to compare your image locations because they will start with http://xyz.abc/ and you only have to check the end
<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<body>
<h1>Testing captcha</h1>
<hr>
<img id="firstImage" src="pictureOne.jpg">
<input type="text" id="firstInput"></input>
<button type="button" onclick="checker()">Confirm</button>
<hr>
<p id="cone">Please type what you see in this picture, This is a captcha to prevent over-spamming</p>
</body>
<script>
function checker() {
var checkPic = document.getElementById('firstImage').src;
var takePic = document.getElementById('firstInput').value;
if (checkPic.endsWith("pictureOne.jpg") && takePic == 'c' ) {
document.getElementById('firstImage').src = 'pictureTwo.jpg';
alert("Please confirm the second captcha");
} else if (checkPic.endsWith('pictureTwo.jpg') && takePic == 'u') {
alert("Ready to download.")
}
}
</script>
</html>
Now we can talk about the CAPTCHA or is your question already solved?
Try this, you are using the full url of the image, which is not always the same as "pictureOne.jpg", you need get the substring of the url from the end.
<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<body>
<h1>Testing captcha</h1>
<hr>
<img id="firstImage" src="pictureOne.jpg">
<input type="text" id="firstInput"/>
<button type="button" onclick="checker()">Confirm</button>
<hr>
<p id="cone">Please type what you see in this picture, This is a captcha to prevent over-spamming</p>
</body>
<script>
function checker() {
alert(123);
var checkPic = document.getElementById('firstImage').src;
var takePic = document.getElementById('firstInput').value;
checkPic = checkPic.substring(checkPic.lastIndexOf('/')+1);
if (checkPic === "pictureOne.jpg" && takePic === 'c') {
document.getElementById('firstImage').src = 'pictureTwo.jpg';
alert("Please confirm the second captcha");
} else if (checkPic === 'pictureTwo.jpg' && takePic === 'u') {
alert("Ready to download.")
}
}
</script>
</html>
School project. I must design a page that contains an input box, a button that sends the entered number to the function, and a paragraph that displays the result. Here's my progress as of now, problem is it just says "false" everytime. Sorry for the triviality of the question, i'm a total newb with web coding.
<!DOCTYPE html>
<html>
<head>
<script>
function isPrime($n)
{
$i=2;
if ($n==2){
return true;
}
$sqrtN = sqrt($n);
while ($i<= $sqrtN){
if ($n % $i ==0){
return false;
}
$i++;
}
return true;
}
</script>
</head>
<body>
Value: <input type="number" id="n"><br>
<input type="submit" value="Send" onclick="isPrime(n)">
</form>
<p id="derp">sdvfsdg</p>
<script>
document.getElementById("derp").innerHTML = isPrime(n);
</script>
</body>
</html>
Basically you are setting the content of the derp once and for all before pressing the button
function isPrime($n)
{
$i=2;
if ($n==2){
document.getElementById("derp").innerHTML = "True";
}
$sqrtN = sqrt($n);
while ($i<= $sqrtN){
if ($n % $i ==0){
document.getElementById("derp").innerHTML = "False";
}
$i++;
}
document.getElementById("derp").innerHTML = "True";
}
And not sure you really need the $ everywhere - that's a PHP thing
You had not used input field value at all, that was your mistake
Value:
<input type="number" id="n">
<br>
<input type="submit" value="Sebd" onclick="x()">
</form>
<p id="derp">sdvfsdg</p>
<div id="try">jdfs</div>
<script>
function x() {
document.getElementById('derp').innerHTML = isPrime(Number(document.getElementById('n').value));
}
function isPrime(n) {
i = 2;
if (n == 2) {
return true;
}
sqrtN = Math.sqrt(n);
document.getElementById('try').innerHTML = n;
while (i <= sqrtN) {
document.getElementById('try').innerHTML = 'try';
if (n % i == 0) {
return false;
}
i++;
}
return true;
}
</script>
Here's the code that'll work for your case... You should execute the code on click AFTER entering the value
<!DOCTYPE html>
<html>
<head>
<script>
</script>
</head>
<body>
Value: <input type="number" id="n"><br>
<input type="submit" value="Send" onclick="checkPrime()"> <!--use function on click-->
</form>
<p id="derp">sdvfsdg</p>
<script>
function isPrime(num)
{
var isPrime = true; //initially set to true
for(var i=2; i<num; i++){
if(num%i == 0){ //if the num gets divide by any other number except itself
isPrime = false;
}
}
return isPrime;
}
function checkPrime(){ //function that gets called on send button click
var number = document.getElementById("n").value; //get the value of input
number = parseInt(number); //since it's a string,convert it into number
document.getElementById("derp").innerHTML = isPrime(number); //check if prime and display result
}
</script>
</body>
</html>
I've have tried alot of different ways with removing the child and nothing has worked so faar, well it has to some degree, either i have no messages or i keep getting message that just add to the span without deleting the other
Tried reading up on how to remove the child, and have tried every different ways i've found to remove it, my code might be wrong on creating the child and append it etc. since it's the first time i use this way. Been trying with a while loop to remove, and the one that is already outcommented in the code, and with firstChild. and with different names instead of msg.
My code looks like this in my script:
function validateName(input, id)
{
var res = true;
var msg = document.getElementById(id);
var error = document.createElement("span");
var errorMsg = "";
if (input == "" || input < 2) {
res = false;
// removeChildren(msg);
errorMsg = document.createTextNode("Input is to short!");
error.appendChild(errorMsg);
id.appendChild(error);
}
if (input >= 2 && input.match(/\d/)) {
res = false;
// removeChildren(msg);
errorMsg = document.createTextNode("Name contains a number!");
error.appendChild(errorMsg);
id.appendChild(error);
}
if (input >= 2 && !input.match(/\d/)) {
res = true;
// removeChildren(msg);
}
return res;
}
My small test page:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
<script src="Validator.js"></script>
<script>
function v1(e,id) {
if(validateName(document.form1.namefield.value, id) == false) {
document.getElementById("be").src="NotOkSmall.jpg";
}
if(validateName(document.form1.namefield.value) == true) {
document.getElementById("be").src="OkSmall.jpg";
}
}
</script>
</head>
<body>
<h1>Validation testing, HO!</h1>
<form name="form1" action="submit">
<div id="div1">
<input type="text" name ="namefield" id="f1" onkeydown="v1(be, div1)" >
<image id="be" src="NotOkSmall.jpg" alt="OkSmall.jpg" />
</div>
<input type="button" value="GO" onClick="v1(be)">
</form>
</body>
</html>
If anyone have any ideas to make it work I for one, would be a very happy guy :), as i have said before i am not even sure the creation of child is the correct way in this case. but as it works when i have removed removeChildren, it does write the correct messages, just dont delete any of them. So something must work..
Thanks.
You had some errors in your code like id.appendChild(error); where you had to use msg.appendChild(error);. Anyway I don't see a need to append/remove child nodes in this case. Just use hidden error placeholder and show it when you want to display an error message.
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JSP Page</title>
<script src="Validator.js"></script>
<script>
function v1(imgId) {
var img = document.getElementById(imgId),
val = document.form1.namefield.value;
img.src = img.alt = validateName(val)
? "OkSmall.jpg"
: "NotOkSmall.jpg";
}
</script>
</head>
<body>
<h1>Validation testing, HO!</h1>
<form name="form1" action="submit">
<div id="div1">
<input type="text" name ="namefield" id="f1" onkeyup="v1('be');" >
<image id="be" src="NotOkSmall.jpg" alt="NotOkSmall.jpg" />
<span id="error-message" class="invis"></span>
</div>
<input type="button" value="GO" onClick="v1('be');">
</form>
</body>
</html>
CSS:
.invis {
display: none;
}
JavaScript:
function validateName(input) {
var res = true,
errorMsg,
errorContainer = document.getElementById('error-message');
if(input.length < 2) {
res = false;
errorMsg = "Input is to short!";
}
if(input.length >= 2 && /\d/.test(input)) {
res = false;
errorMsg = "Name contains a number!";
}
if(res) {
errorContainer.style.display = 'none';
} else {
errorContainer.innerHTML = errorMsg;
errorContainer.style.display = 'inline';
}
return res;
}
DEMO
I'm trying to get the word wrapped line breaks from a textarea without having make any server calls. This answer gets me 90% of the way there. The problem is that the page is reloaded inside of the iframe each time the submit button is clicked. Here's the code:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<body>
<script type="text/javascript">
function getURLParameter(qs, name) {
var pattern = "[\\?&]" + name + "=([^&#]*)";
var regex = new RegExp(pattern);
var res = regex.exec(qs);
if (res == null)
return "";
else
return res[1];
}
function getHardWrappedText() {
var frm_url = document.getElementById('frame').contentDocument.URL;
var text = unescape(getURLParameter(document.getElementById('frame').contentDocument.URL, 'text')).replace(/\+/g, ' ');
return text;
}
function onIFrameLoad() {
var text = getHardWrappedText();
console.log(text);
}
window.onload = function() {
console.log("loading")
};
</script>
<form name="form" method="get" target="frame">
<textarea id="text" name="text" cols=5 wrap="hard">a b c d e f</textarea>
<input type="submit">
</form>
<iframe id="frame" name="frame" onload="onIFrameLoad()" style="display:none;"></iframe>
</body>
</html>
Clicking on the submit button gives the output:
loading
a b c d e
f
Is there a way to prevent the iframe from reloading the page?
You have to return a false to the onsubmit event of the form.
<form name="form" method="get" target="frame" onsubmit="onIFrameLoad">
If it is based on some condition that you do not want to load
function onIFrameLoad() {
var text = getHardWrappedText();
console.log(text);
if(text.indexOf('\n')<0) return false;
}
Am just putting a random thing at text.indexOf('\n')<0, you can have anything that makes sense or always return false (which looks unlikely)
<html>
<head>
<script type="text/javascript">
var c=0;
var t;
var timer_is_on=0;
function timedCount()
{
document.getElementById('txt').value=c;
if(c == 100) return;
c=c+1;
t=setTimeout("timedCount()",30);
}
function doTimer()
{
if (!timer_is_on)
{
timer_is_on=1;
timedCount();
}
}
</script>
</head>
<body onload="doTimer()">
<form>
<input type="button" value="Start count!">
<input type="text" id="txt">
</form>
<p>Click on the button above. The input field will count forever, starting at 0.</p>
</body>
</html>
I want to change
<input type="text" id="txt">
into
<div type="text" id="txt">
It doesn't work.
I think the problem is
document.getElementById('txt').value=c;
But I tried
document.getElementById('txt').innerHTML=c;
It still doesn't work.
Could someone tell me why?
Cheers!!!
Setting the value of the textbox is going to populate the text in the textbox. If you want to replace an input with a div you should use:
element.replaceChild(newDiv, oldTextbox);
Try:
var div = document.createElement("DIV");
div.id = "txt";
div.innerText = "Hello world!";
var tb = document.getElementById("txt");
tb.parentElement.replaceChild(div, tb);
Try changing <div type="text" id="txt"> to <div id="txt">
Basically, you're asking about doing this:
var d = document.createNode("div")
d.setAttribute("id", "txt")
d.setAttribute("type", "text");
var input = document.getElementById( "txt" );
input.parentElement.replaceChild( d, input );
But I think you're better off:
function timedCount()
{
document.getElementById('txt').value=c;
if(c == 100) return;
c=c+1;
t=setTimeout("timedCount()",30);
}
function doTimer()
{
if (!timer_is_on)
{
// set the input to readOnly, this allows JS to update it without
// letting the user modify the value.
document.getElementById('txt').readOnly = true
timer_is_on=1;
timedCount();
}
}