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>
Related
I'm trying to grab an input value with javascript and render it into a div element. What do I do to make it work?
I'm using querySeclector to grab the input value. When I hardcode it like this:
document.getElementById("result").innerHTML = "Hello World";
It works but doesn't when I replace "Hello World" with the variable that stores the input value and when I do a console.log, I get nothing back even though there are no errors.
HTML
<body>
<div id="container">
<div id="values">
<input id="firstinput" type="text" placeholder="Enter 2 positive figures">
<button id="submit">Submit</button>
</div>
<div id="result"></div>
</div>
<script src="script.js"></script>
</body>
JAVASCRIPT
let submitButton = document.querySelector("#submit"),
showResult = document.getElementById("result").innerHTML,
weightsForLeftAndRightSides = document.querySelector("#firstinput").value;
submitButton.addEventListener("click", weightBalancer);
function weightBalancer() {
showResult = weightsForLeftAndRightSides;
console.log(weightsForLeftAndRightSides);
}
you need get input value inside weightBalancer when sumbit button clicked
function weightBalancer() {
var weightsForLeftAndRightSides = document.querySelector("#firstinput").value;
document.getElementById("result").innerHTML = weightsForLeftAndRightSides;
}
if i understood your question, you can write this code to put the user input in div tag:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<meta http-equiv="X-UA_Compatible" content="ie=edge">
<title> Test</title>
<script >
/*to put the user input in div tag*/
function myFunction(){
const userInput=document.querySelector("#firstinput");
const output=document.querySelector("#result");
output.innerHTML=userInput.value;//this parte overwrite the first input
}
</script>
</head>
<body>
<body>
<div id="container">
<div id="values">
<input id="firstinput" type="text" placeholder="Enter 2 positive figures">
<button id="submit" onclick="myFunction()">Submit</button>
</div>
<div id="result"></div>
</div>
</body>
</html>
Hope this helps
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>
I want to use .detach and .prepend with a checkbox, I found this function that uses it with two buttons:
$(document).ready(function(){
var x;
$("#btn1").click(function(){
x = $("p").detach();
});
$("#btn2").click(function(){
$("body").prepend(x);
});
});
But how can I use it with a check box? And when the checkbox is checked it prepend the elemento to the body, and when is unchecked detach the element.
Right now I am using fade in and fade out, but I want to change that to detach and prepend:
$('#toggle').change(function () {
if (!this.checked)
// ^
$('.content').fadeOut('slow');
else
$('.content').fadeIn('slow');
});
How about this:-
var x;
$('#toggle').change(function() {
if (!this.checked)
x = $('.content').detach();
else
$('body').append(x);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="toggle" checked="true" />
<div class="content">
content content content content content content content content content content content content
</div>
Check if this example helps you get a clarity.
$(document).ready(function() {
var p;
$("#trigger").change(function() {
if (this.checked) {
$('#mydiv').prepend(p);
p = null;
} else {
p = $("p").detach();
}
});
});
p {
background: yellow;
margin: 6px 0;
}
p.off {
background: black;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>detach demo</title>
<link href="style.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<div id="mydiv">
<p>Hello</p>
<p>you?</p>
</div>
Toggle:
<input type="checkbox" name="mycheckbox" id="trigger" checked/>
<script src="script.js"></script>
</body>
</html>
$(function () {
var myCheck = $('input[name=myCheck]'),
content = $('#content');
myCheck.change(function(){
if (myCheck.is(':checked')) {
content.prependTo(document.body);
} else {
content.detach();
}
});
});
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div id="content"><span>Content</span></div>
<label for="myCheck">
<input type="checkbox" name="myCheck" checked="true">
<span>My Check</span>
</label>
</body>
</html>
I am making a form validation and I set the property of other checkboxes disable if the owner checkbox is not checked but it is not working.
Here's my html cod:
<!DOCTYPE html>
<html>
<head>
<title>jQuery</title>
<script src="script.js"></script>
<script src="min.js"></script>
</head>
<body>
Owner:<input type="checkbox" id="owner">
<hr>
<div id="check">
bicycle:<input type="checkbox" id="bicycle"><br>
bike:<input type="checkbox" id="bike"><br>
car:<input type="checkbox" id="car">
</div>
<script>
</script>
</body>
</html>
and in it min.js is jQuery installation file and ,
here is script.js :
$(document).ready(function(){
var $checkbox = $("#check").find("input[type=checkbox]");
$checkbox.prop('disabled', true);
$("#owner").click(function(){
var $ownercheck = $(this);
if ($ownercheck.prop('checked') === true) {
$checkbox.prop('disabled', false);
}
else
{
$checkbox.prop('disabled', true);
}
});
});
You have to put min.js above the script.js,
and your html code will look like this :
<!DOCTYPE html>
<html>
<head>
<title>jQuery</title>
<script src="min.js"></script>
<script src="script.js"></script>
</head>
<body>
Owner:<input type="checkbox" id="owner">
<hr>
<div id="check">
bicycle:<input type="checkbox" id="bicycle"><br>
bike:<input type="checkbox" id="bike"><br>
car:<input type="checkbox" id="car">
</div>
</body>
</html>
You must always load the library first. For issue to be fixed, script.js must go after min.js. Your code is working perfectly fine: http://jsfiddle.net/zb3m3/1/
<script src="min.js"></script>
<script src="script.js"></script>
I need checkBox 3 to disable checkBox 1 & 2 when it is selected.
The code works when I have the onClick in the 3rd checkbox tag, but my lead programmer wants the onClick in the JavaScript code above. I'm not that good with JS so I don't know exactly why it's not working. This is what I have so far:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Content-Script-Type" content="text/javascript">
<meta name="Content-Style-Type" content="text/css">
<title>Example</title>
<SCRIPT TYPE="text/javascript">
<!--
var field = document.getElementById("check_1157");
if (field)
{
function update1157Box(contactMethod)
{
var contactMethod = document.getElementById("check_1157");
if(contactMethod.check_1157.checked)
{
//enable the not to receive information
contactMethod.check_1156.disabled =true;
contactMethod.check_1156.checked = false;
contactMethod.check_1158.disabled =true;
contactMethod.check_1158.checked = false;
return;
}
}
field.onClick = update1157Box(this.form)
//the not to receive information
contactMethod.check_1156.checked = false;
contactMethod.check_1156.disabled = false;
contactMethod.check_1158.checked = false;
contactMethod.check_1158.disabled = false;
}
//-->
</SCRIPT>
</head>
<body>
<form>
<div class="many-from-many">
<label style="display: block;"><input id="check_1156"
name="answers[166][]" value="1156" type="checkbox">Check Box 1</label>
<label style="display: block;"><input id="check_1158"
name="answers[166][]" value="1158" type="checkbox"> Check Box 2</label>
<label style="display: block;"><input id="check_1157"
name="answers[166][]" value="1157" type="checkbox">Check Box 3</label>
</div>
</form>
</body>
</html>
jQuery makes event handlers a piece of cake:
$('#check_1157').click(function() {
if ($(this).prop('checked')) {
$('#check_1156, #check_1158').prop({
checked: false,
disabled: true
});
} else {
$('#check_1156, #check_1158').prop({disabled: false});
}
});
My approach apposed to Fabian's, I would do some thing like this, as you have a div around around those block of three checkboxs called many-from-many this will look for the (parent <lable>) nodes (parent <DIV>) of the third check box and then find the childNodes (checkboxs)
<form>
<div class="many-from-many"><label style="display: block;"><input id="check_1156"name="answers[166][]" value="1156" type="checkbox">Check Box 1</label><label style="display: block;"><input id="check_1158"name="answers[166][]" value="1158" type="checkbox">Check Box 2</label><label style="display: block;"><input id="check_1157"name="answers[166][]" value="1157" type="checkbox" onclick="togTopTwo(this)">Check Box 3</label></div>
</form>
.
function togTopTwo(c){
var mm = c.parentNode.parentNode;
var xx = mm.firstChild.firstChild;
var secondOfMany = xx.parentNode.nextSibling.firstChild;
if(c.checked){
xx.disabled=true;
secondOfMany.disabled = true;
}else{
xx.disabled=false;
secondOfMany.disabled =false;
}
}
As Eric's solution is using jQuery, here is a pure JavaScript alternative:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Content-Script-Type" content="text/javascript">
<meta name="Content-Style-Type" content="text/css">
<title>Example</title>
<SCRIPT TYPE="text/javascript">
<!--
var toggle_list = ['check_1156', 'check_1158'];
function toggle(checkbox) {
if (checkbox.disabled) {
checkbox.removeAttribute('disabled');
} else {
checkbox.setAttribute('disabled', true);
}
}
function toggleActivation() {
for (var i=0; i<toggle_list.length; i++) {
var id = toggle_list[i];
var checkbox = document.getElementById(id);
toggle(checkbox);
}
}
//-->
</SCRIPT>
</head>
<body>
<form>
<div class="many-from-many">
<label style="display: block;"><input id="check_1156"
name="answers[166][]" value="1156" type="checkbox">Check Box 1</label>
<label style="display: block;"><input id="check_1158"
name="answers[166][]" value="1158" type="checkbox"> Check Box 2</label>
<label style="display: block;"><input id="check_1157"
name="answers[166][]" value="1157" type="checkbox" onchange="toggleActivation()">Check Box 3</label>
</div>
</form>
</body>
</html>
This might not be IE safe as I am currently running Linux. If it doesn't work in IE, the problem will be inside the toggle function.