使用复选框更新输入文本字段

Question

I'm learning how to do different things with JavaScript and HTML for webpage design and I ran into a problem I can't figure out and can't seem to find when I look for a solution.

I'm making a simple check box table where you are asked a question, you select an answer and a response gets updated based on your answer. The user can click the boxes and the response will always be updated. I only have one function in my JS right now because I was trying to get it to work first before writing the other two. Here is what I have.

 function StrengthCheckbox() { var strengthCheckYes = document.getElementById("strengthCheckYes"); var strengthCheckNo = document.getElementById("strengthCheckNo"); if (strengthCheckYes === document.getElementById("strengthCheckYes").checked) { document.getElementById("checkboxStrengthResponse").value = "You wrestled Putin in your past life didn't you?"; } else if (strengthCheckNo === document.getElementById("strengthCheckNo").checked) { document.getElementById("checkboxStrengthResponse").value = "That could be a problem sometime in the future"; } else if ((strengthCheckYes === document.getElementById("strengthCheckYes").checked) && (strengthCheckNo === document.getElementById("strengthCheckNo").checked)) { document.getElementById("checkboxStrengthResponse").value = "So which is it? Yes or No? Stop playing around!"; } }; 

 <thead> <th colspan="3">Checkbox Version</th> </thead> <tbody> <tr> <td> <p>Question</p> </td> <td> <p>Answer</p> </td> <td> <p>My Response</p> </td> </tr> <tr> <td> <p>Can you fight with your bare hands?</p> </td> <td> <input type="checkbox" id="strengthCheckYes" onchange="StrengthCheckbox()">YES</input> <input type="checkbox" id="strengthCheckNo" onchange="StrengthCheckbox()">NO</input> </td> <td> <input type="text" id="checkboxStrengthResponse" size="60px" disabled></input> </td> </tr> <tr> <td> <p>Are you able to outrun a flying car?</p> </td> <td> <input type="checkbox" id="speedCheckYes" onchange="SpeedCheckbox()">YES</input> <input type="checkbox" id="speedCheckNo" onchange="SpeedCheckbox()">NO</input> </td> <td> <input type="text" id="checkboxSpeedResponse" size="60px" disabled></input> </td> </tr> <tr> <td> <p>Can you out play a super AI in chess?</p> </td> <td> <input type="checkbox" id="intelligenceCheckYes" onchange="IntelligenceCheckbox()">YES</input> <input type="checkbox" id="intelligenceCheckNo" onchange="IntelligenceCheckbox()">NO</input> </td> <td> <input type="text" id="checkboxIntelligenceResponse" size="60px" disabled></input> </td> </tr> </tbody> </table> 

Any help is welcome. Also, I don't know jQuery and I'm sure it can be done using that but I would like only JS answers if you could.

Answer 1

Your if statements are a bit off. You already have the elements you are looking for, no need to look them up again,

Here's a fixed example:

 function StrengthCheckbox() { var strengthCheckYes=document.getElementById("strengthCheckYes"); var strengthCheckNo=document.getElementById("strengthCheckNo"); if(strengthCheckYes.checked && !strengthCheckNo.checked) { document.getElementById("checkboxStrengthResponse").value="You wrestled Putin in your past life didn't you?"; } else if(strengthCheckNo.checked && !strengthCheckYes.checked) { document.getElementById("checkboxStrengthResponse").value="That could be a problem sometime in the future"; } else if((strengthCheckYes.checked) && (strengthCheckNo.checked)) { document.getElementById("checkboxStrengthResponse").value="So which is it? Yes or No? Stop playing around!"; } }; 

 <thead> <th colspan="3">Checkbox Version</th> </thead> <tbody> <tr> <td><p>Question</p></td> <td><p>Answer</p></td> <td><p>My Response</p></td> </tr> <tr> <td><p>Can you fight with your bare hands?</p></td> <td><input type="checkbox" id="strengthCheckYes" onchange="StrengthCheckbox()">YES</input> <input type="checkbox" id="strengthCheckNo" onchange="StrengthCheckbox()">NO</input> </td> <td><input type="text" id="checkboxStrengthResponse" size="60px" disabled></input></td> </tr> <tr> <td><p>Are you able to outrun a flying car?</p></td> <td><input type="checkbox" id="speedCheckYes" onchange="SpeedCheckbox()">YES</input> <input type="checkbox" id="speedCheckNo" onchange="SpeedCheckbox()">NO</input></td> <td><input type="text" id="checkboxSpeedResponse" size="60px" disabled></input></td> </tr> <tr> <td><p>Can you out play a super AI in chess?</p></td> <td><input type="checkbox" id="intelligenceCheckYes" onchange="IntelligenceCheckbox()">YES</input> <input type="checkbox" id="intelligenceCheckNo" onchange="IntelligenceCheckbox()">NO</input></td> <td><input type="text" id="checkboxIntelligenceResponse" size="60px" disabled></input></td> </tr> </tbody> </table> 

Answer 2

You don't need your strengthCheckYes and No variables. You can use just the following since using .checked on your selectors will return the true or flase you're after:

function StrengthCheckbox() {
    document.getElementById("checkboxStrengthResponse").value = '';
    if (document.getElementById("strengthCheckYes").checked) {
        document.getElementById("checkboxStrengthResponse").value = "You wrestled Putin in your past life didn't you?";
    } else if (document.getElementById("strengthCheckNo").checked) {
        document.getElementById("checkboxStrengthResponse").value = "That could be a problem sometime in the future";
    }
    if (document.getElementById("strengthCheckYes").checked && document.getElementById("strengthCheckNo").checked) {
        document.getElementById("checkboxStrengthResponse").value = "So which is it? Yes or No? Stop playing around!";
    }
};

jsFiddle example

Also, note that you need to separate the last condition from the other one since it won't be reached if both checkboxes are checked.

Answer 3

To simply even further and provide a bit of clarity, take a look at the following function:

function StrengthCheckbox() {
  var yes = document.getElementById('strengthCheckYes'),
      no = document.getElementById('strengthCheckNo'),
      response = document.getElementById('checkboxStrengthResponse');

  if (yes.checked) {
    response.value = "You wrestled Putin in your past life didn't you?";
  } else if (no.checked) {
    response.value = "That could be a problem sometime in the future";
  } 

  if (yes.checked && no.checked){
    response.value = "So which is it? Yes or No? Stop playing around!";
  }
};

You can get the elements first and store them in variables. Then, you can check to see if they are checked or not by using input.checked and react accordingly. This has the added benefit of only needing to get the elements from the DOM once everytime the function runs.

Answer 4

document.getElementById("strengthCheckYes").checked return true of false values so use if(document.getElementById("strengthCheckYes").checked) or if(document.getElementById("strengthCheckYes").checked==true)

So the code will be:

    function StrengthCheckbox()
{
var strengthCheckYes=document.getElementById("strengthCheckYes");
var strengthCheckNo=document.getElementById("strengthCheckNo");
if(document.getElementById("strengthCheckYes").checked)
{
document.getElementById("checkboxStrengthResponse").value="You wrestled Putin in your past life didn't you?";
}
else if(!document.getElementById("strengthCheckNo").checked)
{
document.getElementById("checkboxStrengthResponse").value="That could be a problem sometime in the future"; 
}
else if((document.getElementById("strengthCheckYes").checked) && (document.getElementById("strengthCheckNo").checked))
{
document.getElementById("checkboxStrengthResponse").value="So which is it? Yes or No? Stop playing around!";    
}
};