Checkbox and Text Display

Question

Trying to display text in a <p> when checkbox is checked from input modal.

var mayo1 = document.getElementById('mayo1').checked;

if (mayo1.checked == true){
            document.getElementById('order1mayo').innerHTML = "Mayo";
 }

<input type="checkbox" id="mayo1" value="Mayo"> Mayo
<p id="order1mayo"></p>

Replace `mayo1` in your `if` condition with `document.getElementById('mayo1').checked` and see if it make sense. — Heretic Monkey, Mar 04 '19 at 22:16
Possible duplicate of [oncheck listener for checkbox in javascript](https://stackoverflow.com/questions/31705665/oncheck-listener-for-checkbox-in-javascript) — Chris W., Mar 04 '19 at 22:22

score 0 · Answer 1 · answered Mar 04 '19 at 22:18

0

The input field checked property gets true or false. So your mayo1 variablee can be a true or false boolean type. In this case if (mayo1.checked == true) is a mistake. The correct condition is if(mayo1) { ...}

answered Mar 04 '19 at 22:18

miciry89

196
1
5

It's about refactoring but not a mistake. – Sergey Mell Mar 04 '19 at 22:19
For the event: . function Changed(cb) { alert(cb.checked); } – miciry89 Mar 04 '19 at 22:35
I mean that `if(mayo1.checked) {...}` and `if (mayo1.checked == true)` works exactly the same. `if(mayo1) { ...}` is not correct because it will always be `true` if html element exists. – Sergey Mell Mar 04 '19 at 22:37
What is happening when you remove the value="Mayo" attribute from input tag? – miciry89 Mar 05 '19 at 05:58

score 0 · Answer 2 · answered Mar 04 '19 at 22:18

The problem happens because your code

if (mayo1.checked == true){
            document.getElementById('order1mayo').innerHTML = "Mayo";
 }

executes only one time immediately after start. You checkbox is not checked at that moment and thus nothing happens.

You have to watch for the changes using eventListener and change the text content depending on current checkbox status. See this example for the details.

Chris W. · Answer 3 · 2019-03-05T14:40:01.377

0

You need to actually handle an event and go from there;

isChecked = (i) => {
    const o = document.getElementById("order1mayo");
    i === true ?
      o.innerHTML = "Mayo":
      o.innerHTML = "NO Mayo";
}

<input type="checkbox" 
       id="mayo1" 
       value="Mayo" 
       onchange="isChecked(this.checked)">Mayo
       
<h4 id="order1mayo"></h4>

edited Mar 05 '19 at 14:40

answered Mar 04 '19 at 22:18

Chris W.

22,835
3
60
94

score 0 · Answer 4 · edited Mar 04 '19 at 22:53

0

Your mayo1 var is true or false depend on your checkbox, so mayo1.checked is wrong expression...

Try this instead...

if (mayo1) {
  document.getElementById('order1mayo').innerHTML = "Mayo";
}

edited Mar 04 '19 at 22:53

Rastalamm

1,712
3
23
32

answered Mar 04 '19 at 22:20

Maor Barel

37
6

score 0 · Answer 5 · answered Mar 04 '19 at 22:30

0

You're trying to see if mayo1.checked.checked is true - use only one checked:\

var mayo1 = document.getElementById("mayo1").checked;
if (mayo1) {
    document.getElementById("order1mayo").innerHTML = "Mayo";
}

answered Mar 04 '19 at 22:30

Jack Bashford

43,180
11
50
79

Checkbox and Text Display

5 Answers5