Could you please let me know why this code doesn't work? I put the value 1 or the value 2 in the text element but I don't get the result "this is 1" or "this is 2" respectively. It seems that the line "x = document.getElementById("value").value;" doesn't work properly because during debugging I have put n=1; and it works perfect
<html>
<body>
<p>Check the value</p>
<input id="value" type="text"></input>
<button type="button" onclick="myFunction()">Check</button>
<p id="demo"></p>
<script>
function myFunction()
{
var x;
x = document.getElementById("value").value;
switch(x)
{
case 1:
document.getElementById("demo").innerHTML = "this is 1";
break;
case 2:
document.getElementById("demo").innerHTML = "this is 2";
break;
}
}
</script>
</body>
</html>
Values of inputs are strings. You are comparing the string "1" to the number 1 and they are different.
Use parseInt:
<html>
<body>
<p>Check the value</p>
<input id="value" type="text"></input>
<button type="button" onclick="myFunction()">Check</button>
<p id="demo"></p>
<script>
function myFunction()
{
var x;
x = parseInt(document.getElementById("value").value, 10)
switch(x)
{
case 1:
document.getElementById("demo").innerHTML = "this is 1";
break;
case 2:
document.getElementById("demo").innerHTML = "this is 2";
break;
}
}
</script>
</body>
</html>
Convert the variable "x" into integer type by using parseInt(x).ie
var n=parseInt(x);
Related
Was trying to use Math.pow(x,y) on two values inputted in an HTML tag, for some reason it ain't working.
Input1: <input id="input1"> Input2: <input id="input2">
<button onlick="myFunction()">Click Me!</button>
<p id="demo"></p>
<script>
function myFunction() {
var x = document.getElementById('input1').value;
var y = document.getElementById('input2').value;
var z = Math.pow(x, y);
document.getElementById("demo").innerHTML = +z;
}
</script>
You had a typo in your onclick handler attribute. It should be "onclick" not "onlick". Also, you should add the type="number" attribute to your inputs so that users can't enter non-numbers. Furthermore, you should explicitly parse the input values into integers using the parseInt function rather than relying on JS's implicit conversions. Full working example:
function myFunction() {
var xText = document.getElementById('input1').value;
var yText = document.getElementById('input2').value;
var xNum = parseInt(xText, 10);
var yNum = parseInt(yText, 10);
var z = Math.pow(xNum, yNum);
document.getElementById("demo").innerHTML = z;
}
Input1: <input id="input1" type="number">
Input2: <input id="input2" type="number">
<button onclick="myFunction()">Click Me!</button>
<p id="demo"></p>
It's onclick and not onlick which you had mistakenly typed in your code. Do note that you would get NaN as the output if either of the input by user is not in integer format.
So, you can either mention type = 'Number' while taking input explicitly or make a check function which would give an error prompt to user if the input is not a number. I have included a format check function in the demo below.
The below code works after the correction -
<!DOCTYPE html>
<html>
<body>
Input1: <input id="input1"> Input2: <input id="input2">
<button onclick="myFunction()">Click Me!</button>
<p id="demo"></p>
<script>
function myFunction() {
var x = document.getElementById('input1').value;
var y = document.getElementById('input2').value;
if (isNaN(x) || isNaN(y)) {
document.getElementById("demo").innerHTML = 'Wrong input format';
} else {
var z = Math.pow(x, y);
document.getElementById("demo").innerHTML = +z;
}
}
</script>
</body>
</html>
why is this code only giving me the default value
<!DOCTYPE html>
<html>
<body>
<p id= "demo"></p>
<input id="age" />
<button onclick="document.getElementById('demo').innerHTML=text">try it</button>
<script>
var text;
age = document.getElementById('age').value;
switch (age) {
case 10:
text = "diuble";
break;
case 13:
text = "puberty";
break;
case 18:
text = "Beer!";
break;
default:
text = "Looking forward to the Weekend";
}
</script>
</body>
</html>
I have tried changing document.getElementById('age').value to 18, when i do that it gives me the output as beer! but right now its only giving me Looking Forward....
You are not calling a function onclick, and firing the code on document load. The right way to do it would be:
function getText(){
var text;
age = document.getElementById('age').value;
age = parseInt(age)
switch (age) {
case 10:
text = "diuble";
break;
case 13:
text = "puberty";
break;
case 18:
text = "Beer!";
break;
default:
text = "Looking forward to the Weekend";
}
document.getElementById('demo').innerHTML=text
}
<p id= "demo"></p>
<input id="age" />
<button onclick="getText()">try it</button>
I want to create a randomly generated number, ask the user to enter a number, then compare the two and then show a popup telling whether or not they match. This is my code
function myFunction() {
var num=document.getElementById("demo").innerHTML = Math.floor(1000 + Math.random() * 9000);
}
function myFunction1() {
var secondInput = document.getElementById("demo1").value;
if( num === secondInput)
{
window.alert("Same");
}
else
{
window.alert("Don't do that again cvv");
}
<button onclick="myFunction()">press the button to see the code</button>
<p id="demo"></p>
code: <input type="text" name="code" required/><br/><br/>
<button onclick="myFunction1()">Compare</button>
<p id="demo1"></p>
This code works. Please know that there were a couple of improvements:
You referenced to myFunction() before the javascript is loaded.
You need to keep the var num in global scope if you want to reference it in other places, without passing them as an argument.
When comparing values, make sure to select the right input field and to convert the value string to a Number.
var num;
function myFunction() {
num=document.getElementById("demo").innerHTML = Math.floor(1000 + Math.random() * 9000);
}
document.getElementById("button1").addEventListener('click', myFunction)
document.getElementById("button2").addEventListener('click', myFunction1)
function myFunction1() {
var secondInput = document.getElementById("demo1").value;
if( num === +secondInput) {
window.alert("Same");
}
else {
window.alert("Don't do that again cvv");
}
}
<button id="button1" >press the button to see the code</button>
<p id="demo"></p>
code: <input id="demo1" type="text" name="code" required/><br/><br/>
<button id="button2">Compare</button>
<p></p>
First you have to define num in the global scope to be accessable by the two functions and you have to make the first function just show the number without generating a new number every time.
var num;
function show() {
document.getElementById("demo").innerHTML = num;
}
function randomizeAndCompare() {
num = Math.floor(1000 + Math.random() * 9000);
var secondInput = document.getElementById("demo1").value;
if( num === secondInput){
window.alert("Same");
}
else{
window.alert("Don't do that again cvv");
}
}
<button onclick="show()">press the button to see the code</button>
<p id="demo"></p>
code: <input type="text" name="code" required/><br/><br/>
<button onclick="randomizeAndCompare()">Compare</button>
<p id="demo1"></p>
There are a couple of tings here.
First, myFunction1() isn't closed. You should also rename it to something more meaningful, like "compareValue()". That way it is easier to read the code.
You also aren't making a comparison of the two numbers in your compareValue()-function. Your 'num' variable isn't defined. You are also trying to extract the user input value from the button.
See my suggestion for changes:
function generateRandom() {
document.getElementById("demo").innerHTML = Math.floor(1000 +
Math.random() * 9000);
}
function compareValues() {
var num = document.getElementById("demo").innerHTML;
var input = document.getElementById("number").value;
if( num === input)
{
window.alert("Same");
}
else
{
window.alert("Don't do that again cvv");
}
}
HTML:
<button onclick="generateRandom()">press the button to see the code</button>
<p id="demo"></p>
code: <input id="number" type="text" name="code" required/><br/><br/>
<button onclick="compareValues()">Compare</button>
<p id="demo1"></p>
The converter is working fine, it looks for a match to the input and if it finds one, it converts it to the new value.
The problem I am running into is that I can output the new value with document.write(userInput);
But I dont know how to format or add html and text to the output. Help!
<!DOCTYPE html>
<html>
<body>
<h1>Value Converter</h1>
<input type="text" id="userInput"=>Enter the Value</input>
<button onclick="test()">Submit</button>
<script>
function test()
{
var userInput = document.getElementById("userInput").value;
if(userInput == "xxxx") {
userInput="yyyy";
}
else if(userInput == "yyyy") {
userInput="zzzz";
}
else {
userInput="Not Found";
}
document.write("<br /><br /><b> The equivalent value is: </b>") + (userInput) + ("< br /><br /><b>Click here to Start Over</b>");
}
// Need to fix the "reset" to go back to restart the program
</script>
</body>
</html>
Change
document.write("<br /><br /><b> The equivalent value is: </b>") + (userInput) + ("< br /><br /><b>Click here to Start Over</b>");
For
document.write("<br /><br /><b> The equivalent value is: </b>" + userInput + "< br /><br /><b>Click here to Start Over</b>");
You should setup the html the way you want it to look, and then modify it using innerHTML or whatever DOM function/attributes instead of overwriting the page or having to reload it.
HTML
<h1>Value Converter</h1>
<input type="text" id="userInput" placeholder="Enter a value" />
<div>
<span>The equivalent value is: </span>
<span id="output">Enter a value and submit first</span>
</div>
<button onclick="test()">Submit</button>
JS
function test() {
var userInput = document.getElementById("userInput").value;
var converted = "";
switch(userInput){
case "someXXX":
//Do whatever code here
converted = "yyy";
break;
case "someYYY":
//Do whatever code here
converted = "zzz";
break;
default:
//Do whatever when all else fails
converted = "Not found";
break;
}
var output = document.getElementById("output");
output.innerHTML = converted;
}
Note that I changed your if statements to a switch/case
JSFiddle Demo
what is wrong with the code? i have to get the text from the input text box after clicking on submit button, the input text value must be shown in paragraph.
<html>
<body>
<p id="demo"></p>
<br>
<input id="myList" type="text">
<input type="button" value="Try it" onclick="myFunction()"></button>
<script>
function myFunction()
{
var x = document.getElementById("myList");
var txt = "Welcome ";
for (var i=0;i<x.length;i++)
{
txt = txt + x.elements[i].id + "br";
}
document.getElementById("demo").innerHTML=txt;
}
</script>
</body>
</html>
You would want to use this code
document.getElementById('myList').value;
it will grab the value from the input box element.
Check here a demo
Check here no need to loop all the elements
You just need a id of the element so why are you looping it ?
Here is the source code of it
This is the javascript code looks like
function myFunction()
{
var x = document.getElementById("myList");
var txt = "Welcome ";
txt = txt + x.value + "br";
document.getElementById("demo").innerHTML=txt;
}
You want a value from the element so you have to take a value you can see in the functiont
x.value so it will retrive the value from the element and then your function will work i hope this will help you
There are two ways to fix it:
[1] Change x.length to x.value.length and x.elements to x.value.elements
The fiddle
[2] Change var x = document.getElementById("myList"); to var x = document.getElementById("myList").value;
And the fiddle, why not?
A text box has no property length, so I think you are referencing to its text? That's what this fix will do. (Also, it's better practice to use method 2.)
<html>
<body>
<p id="demo"></p>
<br>
<input id="myList" type="text">
<input type="button" value="Try it" onclick="myFunction()">
<script>
function myFunction() {
var x = document.getElementById("myList").value;
alert(x);
var txt = "Welcome ";
for (var i = 0; i < x.length; i++) {
txt = txt + x.charAt(i) + "<br />";
}
document.getElementById("demo").innerHTML = txt;
}
</script>
</body>
</html>
loop??? I didn't understand its very simple try this.
<html>
<body>
<p id="demo"></p><br>
<input id="myList" type="text">
<input type="button" value="Try it" onclick="myFunction()">
<script>
function myFunction() {
var x = document.getElementById("myList");
var txt = "Welcome " + x.value;
document.getElementById("demo").innerHTML = txt;
}
</script>
</body>
</html>
OR
var x = document.getElementById("myList").value;
var txt = "Welcome " + x;
You have to take the "myList" id's value and then assign it to innerHTML of tag which could be done as follows :
<html>
<body>
<p id="demo"></p>
<br>
<form>
<input id="myList" type="text">
<input type="button" value="Try it" onclick="myFunction()"/>
</form>
<script>
function myFunction()
{
var txt = "Welcome";
var x = document.getElementById("myList").value;
txt = txt +" "+x;
document.getElementById("demo").innerHTML=txt;
}
</script>
</body>
</html>