Reset/Submit button won't work once text area is edited by user?


Reset/Submit button won't work once text area is edited by user?



My form's reset and submit buttons do not work when I edit the output of the form in the textarea. I created a form that outputs custom sentences based on user inputs. If I don't edit the textarea these buttons work fine, resetting or resubmitting onclick. However, if I edit the textarea all functionality seizes. Any ideas? Thanks! <3




<!DOCTYPE html>
<html>
<head>
<title>Experiment</title>

<style type="text/css">
table,td,th{
margin-left: auto;margin-right: auto
}
.display{
display: flex;align-items: center;justify-content: center;
}
p{
text-align: center;
}
textarea{
display: block;margin-left:auto;margin-right: auto;
}
</style>



function sentence(){
document.getElementById("s1").style.display= 'block';
document.getElementById("r1").style.display= 'block';
{
if(document.getElementById("z1").value==""){
alert("Hi! Your dog's name is required for submission.")
document.getElementById("z1").focus();
}else if(document.getElementById("z2").value==""){
alert("Hi! Your dog's gender is required for submission.")
}else if(document.getElementById("z3").value==""){
alert("Hi! Your dog's size is required for submission.")
}else{
const input1 = document.getElementById("z1").value
const input2 = document.getElementById("z2").value
const input3 = document.getElementById("z3").value
document.getElementById("s1").innerHTML="My dog's name is " + input1 + ". " + input2 + " loves to play fetch. My dog is " + input3 + ".";
}

}
}

function reset(){
document.getElementById("s1").innerHTML="";
}

function hide(){
document.getElementById("s1").style.display= 'none';
document.getElementById("r1").style.display= 'none';
}


</head>
<body onload="hide()">

<table>
<tr>
<td> <input type="text" id="z1" placeholder="Your Dog's Name" name="name" maxlength="100"></td>
<td> <select name="gender" id="z2"> <option value="" disabled selected>Select your dog's gender.</option> <option value="He">He</option> <option value="She">She</option> </select></td>
<td> <select name="size" id="z3"> <option value="" disabled selected>Select your dog's size.</option> <option value="big">big</option> <option value="medium in size">medium</option> <option value="small in size">small</option> </select></td>
</table>
<br>


Submit

<hr>
<br>
<textarea rows="10" cols="100" id="s1"></textarea>
<br>


Reset


</body>
</html>





I indented your code up there... But did not correct obvious syntax errors. A good indentation helps to find such error like an opening bracket { instead of a closing } And missing HTML tags... Good luck buddy... To look for a code editor is my advise.
– Louys Patrice Bessette
Jun 30 at 3:49



{


}




1 Answer
1



The right way to read/write to a textarea is to use value attribute, not innerHTML. Read HTMLTextAreaElement Reference



The code below works,




function sentence() {
document.getElementById("s1").value = "";// reset
document.getElementById("s1").style.display = "block";
document.getElementById("r1").style.display = "block";
if (document.getElementById("z1").value == "") {
alert("Hi! Your dog's name is required for submission.");
document.getElementById("z1").focus();
} else if (document.getElementById("z2").value == "") {
alert("Hi! Your dog's gender is required for submission.");
} else if (document.getElementById("z3").value == "") {
alert("Hi! Your dog's size is required for submission.");
} else {
const input1 = document.getElementById("z1").value;
const input2 = document.getElementById("z2").value;
const input3 = document.getElementById("z3").value;
document.getElementById("s1").value =
"My dog's name is " +
input1 +
". " +
input2 +
" loves to play fetch. My dog is " +
input3 +
".";

}
}

function reset() {
document.getElementById("s1").value = "";
}

function hide() {
document.getElementById("s1").style.display = "none";
document.getElementById("r1").style.display = "none";
}


table,td,th {margin-left: auto;margin-right: auto}
.display {display: flex;align-items: center;justify-content: center;}
p {text-align: center;}
textarea {display: block;margin-left:auto;margin-right: auto;}


<body onload="hide()">
<table>
<tr>
<td> <input type="text" id="z1" placeholder="Your Dog's Name" name="name" maxlength="100"></td>
<td> <select name="gender" id="z2"> <option value="" disabled selected>Select your dog's gender.</option> <option value="He">He</option> <option value="She">She</option> </select></td>
<td> <select name="size" id="z3"> <option value="" disabled selected>Select your dog's size.</option> <option value="big">big</option> <option value="medium in size">medium</option> <option value="small in size">small</option> </select></td>
</table>
<br>


Submit

<hr>
<br>
<textarea rows="10" cols="100" id="s1">

</textarea>
<br>


Reset


</body>






By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Comments

Post a Comment

Popular posts from this blog

paramiko-expect timeout is happening after executing the command

paramiko-expect timeout is happening after executing the command Can someone help me why timeout is happening after executing the command .I am trying to SSH to a machine and execute a command.I want to store the result of the executed command . I have referred paramiko-timeout but i didn't get my expected result. import traceback try: import paramiko except ImportError: raise Exception("Please install paramiko , pip install paramiko") import pexpect from paramiko_expect import SSHClientInteraction def main(): HOSTNAME = "minion5.net" USERNAME = "root" PASSWORD = "help@432" PROMPT = "root@*:~$s+" try: client = paramiko.SSHClient() client.load_system_host_keys() client.set_missing_host_key_policy(paramiko.AutoAddPolicy()) client.connect(hostname=HOSTNAME, username=USERNAME, password=PASSWORD) with SSHClientInteraction(client, timeout=20, display=True) as interact:
Read more

how to run turtle graphics in Colaboratory

how to run turtle graphics in Colaboratory Given that we can do other types of drawing/visualization in Colaboratory, I would think running turtle graphics would be pretty simple (but not so simple I've figured it out!) I can import the turtle library, but I get the following error when any draw command occurs: TclError: no display name and no $DISPLAY environment variable Thanks in advance. 1 Answer 1 I think P5.js is your best bet. I test it in this notebook. https://colab.research.google.com/drive/1TqF6RObllyslad3KrO4SiAuegRjuJDCF By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
Read more

Export result set on Dbeaver to CSV

Export result set on Dbeaver to CSV Normally I use Dbeaver for windows and always export my result set like this: run my query --> select the result --> export the result set --> select export to clipboard --> done This step by step puts my result set in my clipboard and I can paste it wherever I want to work with it. The problem is that now I am using dbeaver for mac and this guide is not working. I can go on until the moment that I select my result set like in the image below: exporting data set But once I go further in the process, in the last step I get: no query Note that in "source" it was suppose to show the query that originated the result set, but instead it says just "select. As a result it does't select my result or anything (besides being "successful"). Normally my query would show up there automatically and I couldn't find any option that corrects this problem in the menus. Please help me! Thanks. Aft
Read more