javascript - How to check if a <input type="button"> is checked?

The title is self-explanatory, I tried using .checked(and several other methods that also failed), but it did not work.

I want to know how, so I can count the score for a quiz.

Here is the html part for it:

<html>
    <head lang=pt>
       <meta charset="utf-8">
        <title>Formulario</title>
        <link rel="stylesheet" type="text/css" href="quiz1.css">
        <script src=quiz.js></script>
    </head>    
    <body>        
            <form class=formulario onsubmit="return mostrar_placar()"> 
                <h3 id = "pergunta">Qual é o nome do inventor da linguagem de programação Python?<br></h3>
                <input class = "escolhas" id ="0" type="button" value="Guido van Rossum" onclick="keep_highlighted('0')"><br> 
                <input class = "escolhas" id ="1" type="button" value="Dennis Ritchie" onclick="return keep_highlighted('1')"><br> 
                <input class = "escolhas" id ="2" type="button" value="James Gosling" onclick="return keep_highlighted('2')"><br>
                <input class = "escolhas" id ="3" type="button" value="Brendan Eich" onclick="return keep_highlighted('3')"><br>                
                <h3 id = "pergunta">Dentre as alternativas a seguir, qual não é um item de hardware?<br></h3>
                <input class = "escolhas" id ="4" type="button" value="Mouse" onclick="return keep_highlighted('4')"><br> 
                <input class = "escolhas" id ="5" type="button" value="Processador" onclick="return keep_highlighted('5')"><br> 
                <input class = "escolhas" id ="6" type="button" value="Chipset" onclick="return keep_highlighted('6')"><br>
                <input class = "escolhas" id ="7" type="button" value="Debian" onclick="return keep_highlighted('7')"><br><br>                    
                <input type="submit" value="confirmar">
        </form>           
    </body>
</html>

And this is the js:

var certos = ["0", "7"];


function keep_highlighted(id) {
    document.getElementById(id).style.background = "white";
    document.getElementById(id).style.color = "black";
}

function placar() {
    var placar = 0;
    for (var i = 0; i < 8; i++) {
        console.log(document.getElementById(i.toString()).checked);
        if (document.getElementById(i.toString()).checked) {
            if (document.getElementById(i.toString()).value == certos[i]) {
                placar += 1;
            }
        }
    }
    return placar;

}

function mostrar_placar() {
    alert("Seu placar é " + placar());
}

The console is only printing 8 falses no matter what I click(showing that its never checked). So it never enters in the condition that counts the score (without if (document.getElementById(i.toString()).checked) it always shows 2 on the score since it loops through all the buttons even the ones not selected). And with it always shows the score as 0....can someone help?

The title is self-explanatory, I tried using .checked(and several other methods that also failed), but it did not work.

I want to know how, so I can count the score for a quiz.

Here is the html part for it:

<html>
    <head lang=pt>
       <meta charset="utf-8">
        <title>Formulario</title>
        <link rel="stylesheet" type="text/css" href="quiz1.css">
        <script src=quiz.js></script>
    </head>    
    <body>        
            <form class=formulario onsubmit="return mostrar_placar()"> 
                <h3 id = "pergunta">Qual é o nome do inventor da linguagem de programação Python?<br></h3>
                <input class = "escolhas" id ="0" type="button" value="Guido van Rossum" onclick="keep_highlighted('0')"><br> 
                <input class = "escolhas" id ="1" type="button" value="Dennis Ritchie" onclick="return keep_highlighted('1')"><br> 
                <input class = "escolhas" id ="2" type="button" value="James Gosling" onclick="return keep_highlighted('2')"><br>
                <input class = "escolhas" id ="3" type="button" value="Brendan Eich" onclick="return keep_highlighted('3')"><br>                
                <h3 id = "pergunta">Dentre as alternativas a seguir, qual não é um item de hardware?<br></h3>
                <input class = "escolhas" id ="4" type="button" value="Mouse" onclick="return keep_highlighted('4')"><br> 
                <input class = "escolhas" id ="5" type="button" value="Processador" onclick="return keep_highlighted('5')"><br> 
                <input class = "escolhas" id ="6" type="button" value="Chipset" onclick="return keep_highlighted('6')"><br>
                <input class = "escolhas" id ="7" type="button" value="Debian" onclick="return keep_highlighted('7')"><br><br>                    
                <input type="submit" value="confirmar">
        </form>           
    </body>
</html>

And this is the js:

var certos = ["0", "7"];


function keep_highlighted(id) {
    document.getElementById(id).style.background = "white";
    document.getElementById(id).style.color = "black";
}

function placar() {
    var placar = 0;
    for (var i = 0; i < 8; i++) {
        console.log(document.getElementById(i.toString()).checked);
        if (document.getElementById(i.toString()).checked) {
            if (document.getElementById(i.toString()).value == certos[i]) {
                placar += 1;
            }
        }
    }
    return placar;

}

function mostrar_placar() {
    alert("Seu placar é " + placar());
}

Share Improve this question edited Mar 12, 2018 at 19:56 isherwood 61.1k16 gold badges121 silver badges169 bronze badges asked Mar 12, 2018 at 19:55 Mateus 471 gold badge4 silver badges6 bronze badges

5 input type button is not a checkbox – George Commented Mar 12, 2018 at 19:55
3 A button element will never be "checked". – Pointy Commented Mar 12, 2018 at 19:55
Ah so how I see if it's highlighted, do I really have to change the type to =radio?. I really didn't want to do that – Mateus Commented Mar 12, 2018 at 19:57
it is highlighted because you are setting .style.background = "white"; on click. Since you are doing it this way, without storing state in some object. Check if the button style is white to tell whether it is "checked". – George Commented Mar 12, 2018 at 19:58
Buttons never get checked. You should be using input type=radio. – Scott Marcus Commented Mar 12, 2018 at 19:59

Add a ment |

5 Answers 5

Sorted by: Reset to default 5

Buttons should not be used to signify an answer unless they are part of a group of choices. Then, you have to decide if only one item from the group should be allowed to be selected or if multiple items are allowable. This is exactly what checkboxes and radio buttons are for.

Now, you don't have to show the user checkboxes or radio buttons - you can show them something that looks like a button instead, but the "buttons" need to behave either like checkboxes or radio buttons. This can be acplished by actually using checkboxes or radio buttons, but hiding those and, instead, showing label elements that are tied to the hidden items.

Then, in your JavaScript, you can access the actual checkboxes and radio buttons as you normally would.

Here is an example of using hidden checkboxes so that multiple "button" elements can be selected:

document.getElementById("getChecked").addEventListener("click", function(){
   // Gather up all the checked checkboxes into an Array;
   var checkedCheckboxes =
      Array.prototype.slice.call(document.querySelectorAll("input[type='checkbox']:checked"));
      
   // Set up result array
   var result = [];
   
   // Loop over them and add selected values to array
   checkedCheckboxes.forEach(function(checkbox){
     result.push(checkbox.value); 
   }); 
   
   // Clear old output and log new results
   console.clear();
   console.log(result);
});

/* Hide the checkboxes */
input[type='checkbox'] { display:none; }

/* Default styling for labels to make them look like buttons */
input[type='checkbox'] + label {
  display:inline-block;
  box-shadow:1px 1px grey;
  border-radius:3px;
  background-color:#e0e0e0;
  padding:5px;
  font-family:Arial, Helvetica, sans-serif;
  cursor:pointer;
}

/* Styling for labels when corresponding checkbox is checked */
input[type='checkbox']:checked + label {
  box-shadow:-1px -1px grey;
  background-color:#f78d32;
}

<input type="checkbox" id="chk1" name="chk1" value="choice 1">
<label for="chk1">Choice 1</label>

<input type="checkbox" id="chk2" name="chk2" value="choice 2">
<label for="chk2">Choice 2</label>

<input type="checkbox" id="chk3" name="chk3" value="choice 3">
<label for="chk3">Choice 3</label>

<p><button id="getChecked">Get the checked checkbox values</button></p>

Using radio buttons, so that only one "button" can be selected, is almost identical, except for the HTML uses input type=radio and the CSS and JavaScript selectors change to find those radio buttons. Also, since only one radio button can ever be selected (within any given group), there's no need to gather up all the checked radio buttons (from one group) into an array. There will just be one checked button.

document.getElementById("getChecked").addEventListener("click", function(){
   // Get the one radio button (within its group) that is checked:
   var checkedRadio = document.querySelector("input[type='radio'][name='rad']:checked");
   
   // Clear old output and log new results
   console.clear();
   console.log(checkedRadio.value);
});

/* Hide the checkboxes */
input[type='radio'] { display:none; }

/* Default styling for labels to make them look like buttons */
input[type='radio'] + label {
  display:inline-block;
  box-shadow:1px 1px grey;
  background-color:#e0e0e0;
  padding:5px;
  border-radius:3px;
  font-family:Arial, Helvetica, sans-serif;
  cursor:pointer;
}

/* Styling for labels when corresponding radio button is checked */
input[type='radio']:checked + label {
  box-shadow:-1px -1px grey;
  background-color:#f78d32;
}

<input type="radio" id="rad1" name="rad" value="choice 1">
<label for="rad1">Choice 1</label>

<input type="radio" id="rad2" name="rad" value="choice 2">
<label for="rad2">Choice 2</label>

<input type="radio" id="rad3" name="rad" value="choice 3">
<label for="rad3">Choice 3</label>

<p><button id="getChecked">Get the checked radio button value</button></p>

"Ah so how I see if it's highlighted..."

It appears that you want to know if the button is highlighted, which basically is to say that it's the element that is "active" or has focus. You can get this via document.activeElement.

Here's a demo that shows the active element change with clicks on the body.

document.body.onclick = function() {
  console.log(document.activeElement);
};

html, body { height: 100%; }

<button>button</button>
<input placeholder="click in here">

However, you're asking about your solution instead of fully explaining the problem. I don't know how this relates to scoring a quiz, so it could be that you need something very different.

An input button cannot be "checked" in itself. You have a few options for how to handle this though. You could change the elements to a form with radio buttons or checkbox buttons. However, if you want to keep the buttons you could also do something in the javascript keep_highlighted method when the button is clicked such as:

if (document.getElementById(id).classList.contains("checked")) {
    document.getElementById(id).classList.remove("checked");
} else {
    document.getElementById(id).classList.add("checked");
}

and you can get this list of "checked" buttons by using:

document.getElementsByClassName("checked");

This will toggle the "checked" class on the element, which you can get a list of elsewhere in your javascript, such as wherever your submit button directs to

EDIT: Also, you could move your button styling into these if blocks so that you could "toggle" the buttons to be highlighted or not based on them being clicked and users could also "uncheck" a selection.

document.getElementById(id).setAttribute("checked","");
document.getElementById(id).removeAttribute("checked");

You want to set a property such as 'checked' or 'clicked' or 'highlighted' for each button. Then when you click the button, set that to true. Then to check which have been clicked, loop those buttons and check if 'clicked' is true or false.

let buttons = document.querySelectorAll('input[type="button"]');

let buttonData = Array.from(buttons).map((el, i) => {
  el.addEventListener('click', ()=>{
    const clicked = !buttonData[i].clicked;
    buttonData[i].clicked = clicked;
    if(clicked){
      el.classList.add('highlighted');
    } else {
      el.classList.remove('highlighted');
    }
  });
  return {element: el, clicked:false}
});

buttonData.forEach((btn, i) => {
  
});

document.getElementById('check-buttons').addEventListener('click', ()=>{
  buttonData.forEach((btn, i) => {
    console.log("button:", btn.element.id, "is highlighted?", btn.clicked);
  });
});

input[type="button"] {
  min-width: 100px;
  display: block;
}
.highlighted {
  background-color: white;
  outline: 2px solid rgba(230,200,100);
}

<input type="button" id="button0" value="button 0">
<input type="button" id="button1" value="button 1">
<input type="button" id="button2" value="button 2">
<input type="button" id="button3" value="button 3">
<br>
<button id="check-buttons"> which buttons are highlighted ?</button>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - How to check if a <input type="button"> is checked? - Stack Overflow

5 Answers 5

与本文相关的文章

评论列表(0)