vendredi 29 mai 2015

Using Check boxes to update input text field

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 funtion 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. Thank you again




Aucun commentaire:

Enregistrer un commentaire