Form input, need help setting value of input - javascript

i'm trying to get value of input field, so depending on if the input value is 0 or 1, the value of the input is one or two, and it's supposed to show up in console.
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>demo</title>
<meta charset="utf-8">
<style>
</style>
</head>
<body>
<p>Input 0 or 1.</p>
<input id="ok" type="text">
<button onclick="functionn()"></button>
<script>
var x = document.getElementById("ok").value;
function functionn() {
if (x == 0) {
ok = "one";
console.log(ok); }
else if (x == 1) {
ok = "two";
console.log(ok);
} else {
alert("please input 0 or 1");
}
}
</script>
</body>
</html

You are so close!
The problem that you have is the "x" variable, it holds the value on the input after the page was loaded, which is and empty string.
You need to put that variable inside the function, so every time you click the button you will "go" and check the value of the input and then store it inside the "x" variable.
Hope this help! =]

try it:
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>demo</title>
<meta charset="utf-8" />
<style></style>
</head>
<body>
<p>Input 0 or 1.</p>
<input id="ok" type="text" />
<button onclick="functionn()"></button>
<script>
var x = document.getElementById("ok");
function functionn() {
if (x.value === "0") {
ok = "one";
console.log(ok);
} else if (x.value === "1") {
ok = "two";
console.log(ok);
} else {
alert("please input 0 or 1");
}
}
</script>
</body>
</html>

Related

Checkbox automatically being selecting when button clicked, how can I stop this?

I am making a calculator and want a specific value to be assigned depending on if the checkbox is checked or not, the code I have might work however everytime I click the "Calculate" button it automatically checks the checkbox even if it wasn't checked in the first place. How would I fix this?
function run() {
var checkbox = document.getElementById('side1');
if (checkbox.checked = true) {
var output = 5;
} else {
var output = 3;
}
document.getElementById("totalvalue").innerHTML = output;
}
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<title>Document</title>
</head>
<body>
<form>
<label for="side1">Side 1</label>
<input type="checkbox" id="side1" name="side1"></input>
<input type="button" value="Calculate" onclick="run()"></input>
<span>Total: $</span>
<span id="totalvalue"></span>
<script type="text/javascript" src="tek.js"></script>
</form>
</body>
</html>
You have a typo in tek.js
Since you are assigning true to checkbox.checked , it sets the checkbox (similar to checking the checkbox) and 5 is evaluated based on your logic.
You may want to set checkbox.checked == true to get desired output.
I updated your code now. It's working as expected. Due to your if condition, your checkbox got selected.
i replaced if (checkbox.checked = true) with if (checkbox.checked == true). It is now working.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
function run() {
var checkbox = document.getElementById('side1');
if (checkbox.checked == true) {
var output = 5;
} else {
var output = 3;
}
document.getElementById("totalvalue").innerHTML = output;
}
</script>
</head>
<body>
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<title>Document</title>
</head>
<body>
<form>
<label for="side1">Side 1</label>
<input type="checkbox" id="side1" name="side1"></input>
<input type="button" value="Calculate" onclick="run()"></input>
<span>Total: $</span>
<span id="totalvalue"></span>
<script type="text/javascript" src="tek.js"></script>
</form>
</body>
</html>
</body>
</html>

How to reuse a function without refreshing the page

When i use the function to check if number is positive or negative it works fine but when i try to do it again nothing happens i have to refresh the whole page to make it work again. Any help is welcome!
const userNum = document.querySelector(".user-input").value;
const checkBtn = document.querySelector(".check-input");
const result = document.querySelector(".result");
function checkNum() {
if (userNum > 0) {
result.innerHTML = "Positive!!"
}
else if (userNum < 0) {
result.innerHTML = "Negativeee!!"
}
else if (userNum < 0) {
result.innerHTML = "Number is NULL"
}
else {
result.innerHTML = "Enter a Number!!"
}
return false;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="intro">
<h1>A Program to Check if number is <br></h1>
<h2>Positive, Negative or Null</h2>
</div>
<div class="check-number-type">
<input type="text" class="user-input">
<button onclick="checkNum()" class="check-input">Check</button>
</div>
<div class="show-result">
<p class="result"></p>
</div>
</div>
</body>
<script src="/script.js"></script>
</html>
The reason why you say you have to "reload" the page everytime is because your code that extracts the input value was placed outside of your checkNum function that determines if it's positive or negative.
You only retrieve the input once, when the script starts, instead of getting a fresh copy everytime you enter the checkNum function.
Just move this:
const userNum = document.querySelector(".user-input").value;
Inside the checkNum() function.

Why can't I get the inserted value of an input?

I have an input here with no default value set for, and I want to console.log the inserted value of the input when the button is clicked, but each time I click on the button, it logs empty, and not the inserted value of the input.
What might I be missing here?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Color Box Creator</title>
<style>
</style>
</head>
<body>
<label>Please enter a color :
<input type="text">
</label>
<br><br>
<button>CREATE</button>
<script>
let value = document.getElementsByTagName("input").item(0).value ;
// let valuePart = value.split(",") ;
document.querySelector('button').onclick = function () {
console.log(value) ;
}
</script>
</body>
</html>
Here is the correct code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Color Box Creator</title>
<style>
</style>
</head>
<body>
<label>Please enter a color :
<input type="text">
</label>
<br><br>
<button>CREATE</button>
<script>
//let value = document.getElementsByTagName("input").item(0).value ;
// let valuePart = value.split(",") ;
document.querySelector('button').onclick = function () {
let value = document.getElementsByTagName("input").item(0).value ;
console.log(value) ;
}
</script>
</body>
</html>
In your script, the variable value is assigned the value in the beginning and not when the button is clicked. Move this code into the onclick handler.
document.querySelector('button').onclick = function () {
let value = document.getElementsByTagName("input").item(0).value ;
console.log(value) ;
}
You need to get the value when the user clicks. What you did in your code was just to take the value one time. This variable would not change . Try this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Color Box Creator</title>
<style>
</style>
</head>
<body>
<label>Please enter a color :
<input type="text">
</label>
<br><br>
<button>CREATE</button>
<script>
// let valuePart = value.split(",") ;
document.querySelector('button').onclick = function () {
let value = document.getElementsByTagName("input").item(0).value ;
console.log(value) ;
}
</script>
</body>
</html>
If you needed the value to be a global then you could also do this :
let value ;
document.querySelector('button').onclick = function () {
value = document.getElementsByTagName("input").item(0).value ;
console.log(value) ;
}
What you need to understand here is the scope and the lifecycle of a variable.
When you declare a variable like this
let value = document.getElementsByTagName("input").items(0).value
What you actually are doing is getting the value of the input element but only one time. That means that if the value of the input changes , it won't update the appropriate variable.

Can't add 1 by pressing button

I made a simple HTML with JS inside, and its about add 1 to variable and keep running until user gets 1 by rng(random number generator). Here's the code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
function clicked(){
var num = Math.floor((Math.random() * 100) + 1);
var click = 0;
click = click+1;
if(num == 1){
document.getElementById("print").innerHTML="Congratz! You did it in "+click+" times!";
document.getElementById("press").disabled = true;
}
else{
document.getElementById("print").innerHTML="Not the right number! You 've pressed "+click+" times!";
}
}
</script>
</head>
<h1>TEST YOUR LUCK!</h1>
<body>
<input type="button" value="Press Me!" id="press" onclick="clicked()">
<div id="print"></div>
</body>
</html>
At this code, click = click+1 don't work and click is stuck at 1. What should I do?
The reason your click stuck to 1 is whenever function called you are declaring
click = 0, so it is initialized every time you press the button. So just declare var click outside of function clicked() and see the magic.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
var click = 0;
function clicked(){
var num = Math.floor((Math.random() * 100) + 1);
click = click+1;
if(num == 1){
document.getElementById("print").innerHTML="Congratz! You did it in "+click+" times!";
document.getElementById("press").disabled = true;
}
else{
document.getElementById("print").innerHTML="Not the right number! You 've pressed "+click+" times!";
}
}
</script>
</head>
<h1>TEST YOUR LUCK!</h1>
<body>
<input type="button" value="Press Me!" id="press" onclick="clicked()">
<div id="print"></div>
</body>
</html>

window onload javascript in chrome

Thanks in advance.
Please find the following script, it alerts e.value = "yes" in fire fox and "no" chrome...
what' wrong with this code?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>new_file</title>
<script type="text/javascript">
function func(){
alert("I am at Func")
}
var i = 0;
document.write("<form style='display: block'><input name='test' id='test' value='no'></form>");
window.onload = function () {
global();
};
function global(){
var e=document.getElementById("test");
alert(e.value);
if(e.value=="no" && i == 0 ){
e.value="yes";
i = 1;
}
else {
//e.value="no";
func();
}
}
</script>
</head>
<body>
</body>
</html>
What i need is based on that e.value i need to call the func()? Any one please answer it...

Categories