0

i can's seem to get the element by using id with query selector. Is there a way to check if the checkbox were checked using document.getelementbyId?

<script>
function checked(a,b,c){
    var marked = (a+b+c)
    document.write(marked);
}

function filled(){
    var value1 = document.querySelector("#1:checked").value;
    var value2 = document.querySelector("#2:checked").value;
    var value3 = document.querySelector("#3:checked").value;

    checked(value1,value2,value3);

    

}

<body>

<input class="chk1" id="1" type="checkbox" value="10"/>
<input class="chk2" id="2" type="checkbox" value="20"/>
<input class="chk3" id="3" type="checkbox" value="30"/>

<button name="submit" onclick="filled()" type="button" style="width: 100px; height: 100px;" >Submit</button>


</body>

2 Answers2

1

Your IDs aren't valid. Even if they were (such as if you changed them to start with a letter), if a checkbox isn't checked, the querySelector will return null (so accessing the .value won't work).

Remove the IDs and use querySelectorAll instead. To make things concise, I'd give them all a single class and then the :checked pseudo-selector combined with the class will select all checked boxes.

You should also really avoid inline handlers if at all possible, they have they have way too many problems to be worth using nowadays.

document.querySelector('button').addEventListener('click', () => {
  const checkedBoxes = document.querySelectorAll('.chk:checked');
  const sum = [...checkedBoxes].reduce((a, b) => a + Number(b.value), 0);
  console.log(sum);
});
button {
  width: 100px;
  height: 100px;
}
<input class="chk" type="checkbox" value="10">
<input class="chk" type="checkbox" value="20">
<input class="chk" type="checkbox" value="30">

<button>Submit</button>
CertainPerformance
  • 356,069
  • 52
  • 309
  • 320
  • Good answer with all the relevant points. I wish it would at least point out that inline event listeners shouldn't be used. – connexo Jan 23 '21 at 15:58
  • is there any reason why i shouldn't use inline event listerner? –  Jan 23 '21 at 16:54
  • Follow the link in the question for one example - they have an incredibly demented scope chain, in addition to tedious and error-prone quote escaping issues. Attach event listeners properly using Javascript with `addEventListener` instead. – CertainPerformance Jan 23 '21 at 16:56
  • if i have 5 input do i have to put 5 dots inside const sum = [...checkedBoxes] –  Jan 23 '21 at 17:23
  • @Vaness Yes, the dots transform the NodeList to an array, and `.reduce` can only be called on an array. There are other methods, but using `.reduce` is probably the most concise and appropriate. – CertainPerformance Jan 23 '21 at 17:25
0

using numbers, punctuation or special characters in the value of an ID may cause trouble in other contexts (e.g., CSS, JavaScript, regex).

For example, the following ID is valid in HTML5:

<div id="1"> ... </div>

However, it is invalid in CSS because selectors cannot be a digit or start with a digit but can be inbetween or end with a digit.

So just change the values of your ID attributes in your html and where u referenced them in your javascript. Be sure to not miss any semi colons

Tammy06
  • 3
  • 3