I have already added id in HTML for JS, but when I open the website, it still displays an error:
Uncaught TypeError: Cannot set property 'onclick' of null
Please help.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="jquery-1.7.2.js" type="text/javascript"></script>
<script>
var btn = document.getElementById("btn");
btn.onclick = function() {
var arrays = new Array();
var items = document.getElementsByName("check");
for(var i=0;i<items.length;i++) {
if(items[i].checked) {
arrays.push(items[i].value);`enter code here`
}
}
alert("numbers checked:" + arrays.length);
}
</script>
</head>
<body>
<input type="checkbox" value="1" name="check" checked/>
<input type="checkbox" value="2" name="check"/>
<input type="checkbox" value="3" name="check" checked/>
<input type="button" value="numbers you have checked" id="btn"/>
</body>
</html>
Try this
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<input type="checkbox" value="1" name="check" checked/>
<input type="checkbox" value="2" name="check" />
<input type="checkbox" value="3" name="check" checked/>
<input type="button" value="numbers you have checked" id="btn" />
<script src="jquery-1.7.2.js" type="text/javascript"></script>
<script>
var btn = document.getElementById("btn");
btn.onclick = function () {
var arrays = new Array();
var items = document.getElementsByName("check");
for (var i = 0; i < items.length; i++) {
if (items[i].checked) {
arrays.push(items[i].value);
}
}
alert("numbers checked:" + arrays.length);
}
</script>
</body>
</html>
Instead of using an input, use a button. and call the function as below:
<button id="btn" onclick="myFunction()">
Related
i am trying to add 2 number as value from input form. typeof(parseInt(value1)) and typeof(parseInt(value2)) return number
but parseInt(value1)+parseInt(value2) return NaN. please someone explain
var input1 = document.getElementById('num1')
var input2 = document.getElementById('num2')
var value1 = input1.value
var value2 = input2.value
btn.addEventListener('click', myfunc)
function myfunc() {
alert(typeof(parseInt(value1)))
alert(typeof(parseInt(value2)))
alert(parseInt(value1)+parseInt(value2))
}
<!DOCTYPE html>
<html lang="en">
<head>
<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>Tính toán</title>
</head>
<body>
<form action="">
<div>
<label for="num1">Number 1</label>
<div>
<input type="number" name="num1" id="num1" />
<span class="error" id="errNum1">(*)</span>
</div>
</div>
<div>
<label for="num2">Number 2</label>
<div>
<input type="number" name="num2" id="num2" />
<span class="error" id="errNum2">(*)</span>
</div>
</div>
<div></div>
<div>
<input type="button" value="Tính toán" id="btn" />
</div>
</form>
<script src="js.js"></script>
</body>
</html>
You get the value of the inputs when the page is loaded, so they will always be empty. Instead you want to get the values when the button is clicked.
btn.addEventListener('click', myfunc)
function myfunc() {
var input1 = document.getElementById('num1')
var input2 = document.getElementById('num2')
var value1 = input1.value
var value2 = input2.value
alert(typeof(parseInt(value1)))
alert(typeof(parseInt(value2)))
alert(parseInt(value1)+parseInt(value2))
}
The correct way to do that:
You don't need to use parseInt() on input type= number,
just use valueAsNumber property
const myForm = document.forms['my-form']
myForm.btn.onclick = evt =>
{
console.clear()
console.log(typeof myForm.num1.valueAsNumber)
console.log(typeof myForm.num2.valueAsNumber)
console.log( myForm.num1.valueAsNumber + myForm.num2.valueAsNumber )
}
label
, button {
display : block;
margin : .3em;
}
<form action="" name='my-form'>
<label>
Number 1
<input type="number" name="num1" value="0" >
</label>
<label>
Number 2
<input type="number" name="num2" value="0" >
</label>
<button name="btn" type="button"> Tính toán </button>
</form>
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="Author" content="Micah Cave">
<title>Ice 11</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#convert").click( function() {
var dollarAmount = $('input:text').val();
if ( $("#usa").is(':checked') )
dollarAmount = dollarAmount*1;
if ( $("#russia").is(':checked') )
dollarAmount = dollarAmount * 73.18;
});
});
</script>
</head>
<body>
<h1>Cave</h1>
<h2>Part 1B</h2>
<p>Type in the starting amount (in US dollars) here: <input type="text"></p>
<input type="checkbox" id="usa">US Dollars <br>
<input type="checkbox" id="russia">Russian Ruble <br>
<input type="checkbox" id="france">France Francs <br>
<input type="checkbox" id="japan">Japanese Yen <br>
<input type="button" id="convert" value="Convert currency(s)">
<p id="pasteHere"></p>
</body>
</html>
So I need to take the value that's entered in the input box above, and then if they check off any box(s) to then convert each checked boxs currency from US to whatever was selected, and then print out the results each time using if statements.
you can make a function called convert,when convert button click or checkbox click then call that function.
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="Author" content="Micah Cave">
<title>Ice 11</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#convert").click(convert);
$("input:checkbox").click(convert)
});
function convert(){
var dollarAmount = $('input:text').val();
var result = " "
if ( $("#usa").is(':checked') )
result += dollarAmount*1 + ";";
if ( $("#russia").is(':checked') )
result += dollarAmount * 73.18 + ";";
$("#pasteHere").text(result)
}
</script>
</head>
<body>
<h1>Cave</h1>
<h2>Part 1B</h2>
<p>Type in the starting amount (in US dollars) here: <input type="text"></p>
<input type="checkbox" id="usa">US Dollars <br>
<input type="checkbox" id="russia">Russian Ruble <br>
<input type="checkbox" id="france">France Francs <br>
<input type="checkbox" id="japan">Japanese Yen <br>
<input type="button" id="convert" value="Convert currency(s)">
<p id="pasteHere"></p>
</body>
</html>
That is my solution:
$(document).ready(function() {
let selectedCurrencies = [];
$("#convert").click(function() {
let dollarAmount = $('input:text').val();
let checkBoxList = $('input:checked');
let resultText = "";
for (let i = 0; i < checkBoxList.length; i++) {
resultText += "US "+dollarAmount+" dollar =";
switch (checkBoxList[i].id) {
case 'usa':
resultText += dollarAmount * 1;
break;
case "russia":
resultText += dollarAmount * 73.18;
break;
}
resultText+=" "+(checkBoxList[i].nextSibling.textContent)+"<br>";
}
$("#pasteHere").html(resultText);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>Cave</h1>
<h2>Part 1B</h2>
<p>Type in the starting amount (in US dollars) here: <input type="text"></p>
<input type="checkbox" id="usa">US Dollars <br>
<input type="checkbox" id="russia">Russian Ruble <br>
<input type="checkbox" id="france">France Francs <br>
<input type="checkbox" id="japan">Japanese Yen <br>
<input type="button" id="convert" value="Convert currency(s)">
<p id="pasteHere"></p>
I am new to JavaScript. below is my code to print array once new item is added but not printing the array. can someone help. below is my code. I am also not getting any error in console. I have used push method to add new item to array and once added calling display function to print the array.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<input type="text" id="item" >
<br>
<br/>
<input type="button" value="Push" onClick="Push()">
<input type="button" value="Pop" onClick="Pop()">
<input type="button" value="Shift" onClick="Shift()">
<input type="button" value="UnShift" onClick="UnShift()">
<div id="list_items"> </div>
<script type="text/javascript">
var arra1=[12,34,56,67,78,89,87];
function display()
{
var lists=document.getElementById('list_items');
document.write("Array items are:<br>" );
for(var i=0;i<arra1.length;i++)
{
var para = document.createElement('div');
lists.appendChild(para);
para.innerHTML = arra1[i];
}
}
function Push()
{
var item1=document.getElementById("item").value;
arra1.push(item1);
display();
}
function Pop()
{
arra1.pop();
display();
}
</script>
</body>
</html>
So I just Edited this a little bit and got it working.
var arra1=[12,34,56,67,78,89,87];
function display()
{
var lists=document.getElementById('list_items');
for(var i=0;i<arra1.length;i++)
{
var para = document.createElement('p');
lists.appendChild(para);
para.innerHTML = arra1[i];
}
}
function Push()
{
var item1=document.getElementById("item").value;
arra1.push(item1);
display();
}
function Pop()
{
arra1.pop();
display();
}
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<input type="text" id="item" >
<br>
<br/>
<input type="button" value="Push" onClick="Push()">
<input type="button" value="Pop" onClick="Pop()">
<input type="button" value="Shift" onClick="Shift()">
<input type="button" value="UnShift" onClick="UnShift()">
<div id="list_items">
</div>
<scrip
</script>
</body>
</html>
i need to do six checkboxes for one image , and this image need to change if one or more checkboxes is cheked , how i can do it? please help me , i attach my code.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
</head>
<body>
<img src="img/fotodiente/1.jpg" width="78" height="107" alt="1" id="diente1" onclick="changeImage1()"/>
<form name="form1" onsubmit="checkBoxValidation()">
<p><input type="checkbox" name="chbdiente1" value="1"/>Vestibular</p>
<p><input type="checkbox" name="chbdiente1" value="2"/>Mesial</p>
<p><input type="checkbox" name="chbdiente1" value="3"/>Oclusal</p>
<p><input type="checkbox" name="chbdiente1" value="4"/>Distal</p>
<p><input type="checkbox" name="chbdiente1" value="5"/>Palatino</p>
<p><input type="checkbox" name="chbdiente1" value="6"/>Lingual</p>
<p><input type="submit" value="submit"/>
</form>
<%String chbdiente1[] = request.getParameterValues("chbdiente1");
if (chbdiente1 != null) {%>
<script>
function changeImage1() {
var image = document.getElementById('diente1');
image.src = "img/fotodiente/1.1.jpg";
}
;
</script>
<ul><%for (int i = 0; i < chbdiente1.length; i++) {%>
<li><%=chbdiente1[i]%></li><%}%>
</ul><%}%>
</body>
</html>
i have this code and send me the value of selected checkboxes , but the image not change. help please. thanks
If you want to change the image after click of checkboxes you need to call changeImage1() into onchange or onclick method of checkbox.
Example:
<script>
$('document').ready(function(){
$('input[type="checkbox"]').click(function(){
changeImage1();
});
});
function changeImage1() {
var image = document.getElementById('diente1');
image.src = "img/fotodiente/1.1.jpg";
}
</script>
function changeImage1() {
var image = document.getElementById('diente1');
var checkboxes = document.getElementById("form1");
var cont = 0;
try {
for (var x = 0; x < checkboxes.length; x++) {
if (checkboxes[x].checked) {
cont = cont + 1;
}
}
} catch (e) {
}
try {
if (cont > 0) {
image.src = "img/fotodiente/1.1.jpg";
d1 = 2;
array.push("Pieza 1");
var chb2 = document.getElementsByName("form1");
} else if (cont === 0) {
image.src = "img/fotodiente/1.jpg";
d1 = 1;
array.splice(1, 1);
}
} catch (e) {
}
}
;
<img src="img/fotodiente/1.jpg" class="item_thumb" width="78" height="107" alt="1" id="diente1" onclick="changeImage1()"/>
<form id="form1" method="post" action="">
<input type="checkbox" id="chbdiente1" value="1" onclick="changeImage1();" /><label>Vestibular</label>
<input type="checkbox" id="chbdiente1" value="2" onclick="changeImage1();" /><label>Mesial</label>
<input type="checkbox" id="chbdiente1" value="3" onclick="changeImage1();" /><label>Oclusal</label>
<input type="checkbox" id="chbdiente1" value="4" onclick="changeImage1();" /><label>Distal</label>
<input type="checkbox" id="chbdiente1" value="5" onclick="changeImage1();" /><label>Palatino</label>
<input type="checkbox" id="chbdiente1" value="6" onclick="changeImage1();" /><label>Lingual</label>
<input type="button" name="Submit" value="Contar" hidden="">
</form>
Well, this changes the image when there are 1 or more checkboxes clicked, if all the checkboxes are unchecked the image returns to the first one.
I hope also I can help others and thanks
I am writing this code, but unable to get anything. Any help is appreciated.
<!DOCTYPE HTML>
<html>
<head>
<script>
function computeMarks() {
var inputElems = document.form1.getElementsByTagName("input");
var count = 0;
for (var i =0; i<=inputElems.length; i++) {
if(inputElems[i].type === "checkbox" && inputElems[i].checked) {
count++;
}
}
alert(count);
}
</script>
</head>
<body>
<form name="form1" id="form1">
<input type="checkbox" name="quiz" value=1 /> Hi
<input type="checkbox" name="quiz" value=1 /> Bye
<input type="checkbox" name="quiz" value=1 /> See ya
<input type="button" onClick="computeMarks()" value="Compute Marks"/>
</form>
</body>
</html>
I have tried to do getElementByName("quiz") but the same thing is happening.
Change i<=inputElems.length to i < inputElems.length. Array indexes run from 0 to length-1. You're getting an error when i is inputElements.length (when your scripts don't work, isn't the Javascript console the first place you look for help?).
DEMOenter link description here
Well what you need to do is just remove = sign from <= in your code.
<!DOCTYPE HTML>
<html>
<head>
<script>
function computeMarks() {
var inputElems = document.form1.getElementsByTagName("input");
var count = 0;
for (var i =0; i<inputElems.length; i++) {
if(inputElems[i].type === "checkbox" && inputElems[i].checked) {
count++;
}
}
alert(count);
}
</script>
</head>
<body>
<form name="form1" id="form1">
<input type="checkbox" name="quiz" value=1 /> Hi
<input type="checkbox" name="quiz" value=1 /> Bye
<input type="checkbox" name="quiz" value=1 /> See ya
<input type="button" onClick="computeMarks()" value="Compute Marks"/>
</form>
</body>
</html>
I recommand the JQuery to do this, it's way easier. Here is an example if you use JQuery in your code instead of plain javascript:
<!DOCTYPE HTML>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
function computeMarks() {
var counter = 0;
$('input[type="checkbox"]').each(function(){
if($(this).prop('checked'))
{
counter++;
}
});
alert(counter);
}
</script>
</head>
<body>
<form name="form1" id="form1">
<input type="checkbox" name="quiz" value=1 /> Hi
<input type="checkbox" name="quiz" value=1 /> Bye
<input type="checkbox" name="quiz" value=1 /> See ya
<input type="button" onClick="computeMarks()" value="Compute Marks"/>
</form>
</body>
</html>
You can get the reference of the form and loop through it's elements to see if they are checked or not, simply replace your function with this and it should work:
function computeMarks() {
var checked = 0;
var form = document.getElementById("form1");
var index, element;
for (index = 0; index < form.elements.length; ++index) {
element = form.elements[index];
// You may want to check `element.name` here as well
if (element.type.toUpperCase() == "CHECKBOX" && element.checked)
++checked;
}
alert(checked);
}
See the DEMO here
I would recommend you query the elements, and add the event in JavaScript, for example:
var form = document.form1
var button = form.querySelector('[type="button"]')
var checkboxes = form.querySelectorAll('[type="checkbox"]')
var computeMarks = function(els) {
return []
.map.call(els, function(x){return +x.checked})
.reduce(function(x, y){return x + y})
}
button.addEventListener('click', function() {
alert(computeMarks(checkboxes))
})
Demo: http://jsfiddle.net/u59c3d1L/2/