javascript - Using Check boxes to update input text field -
i'm learning how different things javascript , html webpage design , ran problem can't figure out , can't seem find when solution.
i'm making simple check box table asked question, select answer , response gets updated based on answer. user can click boxes , response updated. have 1 function in js right because trying work first before writing other two. here 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 past life didn't you?"; } else if (strengthcheckno === document.getelementbyid("strengthcheckno").checked) { document.getelementbyid("checkboxstrengthresponse").value = "that problem sometime in future"; } else if ((strengthcheckyes === document.getelementbyid("strengthcheckyes").checked) && (strengthcheckno === document.getelementbyid("strengthcheckno").checked)) { document.getelementbyid("checkboxstrengthresponse").value = "so 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 fight 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 able outrun 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 out play 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 welcome. also, don't know jquery , i'm sure can done using js answers if could.
your if
statements bit off. have elements looking for, no need them again,
here's 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 past life didn't you?"; } else if(strengthcheckno.checked && !strengthcheckyes.checked) { document.getelementbyid("checkboxstrengthresponse").value="that problem sometime in future"; } else if((strengthcheckyes.checked) && (strengthcheckno.checked)) { document.getelementbyid("checkboxstrengthresponse").value="so 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 fight 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 able outrun 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 out play 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>
Comments
Post a Comment