Using Check boxes to update input text field

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.

What kind of equations you have in your if, I think they won't be equal at all, you must change your left hand side. e.g. strengthCheckYes.checked === ... — user3154370
– user3154370, Commented May 29, 2015 at 15:25

Dave · Accepted Answer · 2015-05-29 15:25:57Z

2

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>

answered May 29, 2015 at 15:25

Dave

11k3 gold badges45 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

ShadowManes Over a year ago

Thank you so much for the help. That worked exactly like I wanted it too.

Dave Over a year ago

Glad to be of assistance. Please accept the answer if it helped you.

ShadowManes Over a year ago

I will once it allows me. IT is making me a couple minutes before I can accept it

Community · Accepted Answer · 2020-06-20 09:12:55Z

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.

Vaune · Accepted Answer · 2015-05-29 15:29:01Z

0

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.

answered May 29, 2015 at 15:29

Vaune

3143 silver badges13 bronze badges

3 Comments

ShadowManes Over a year ago

This is a nice simplified version of what I have and what @dave posted above. This is useful as well. Thank you for your response

Vaune Over a year ago

My pleasure. When working with Javascript like this, I like to get all the elements I'm going to need first, then apply the logic later in the function. I find it helps reduce complexity later, or makes it easier to make changes when needed.

ShadowManes Over a year ago

It's the same way I get taught how to do C++ here at my University. I should probably apply that more and more in the future when I use JS

Noel Samuel · Accepted Answer · 2015-05-29 16:06:13Z

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!";    
}
};

Collectives™ on Stack Overflow

Using Check boxes to update input text field

4 Answers 4

3 Comments

Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related