ModifyDOM to clear text launched by a radio button
Question
I have made a form that I can clear with a reset button. On this form, I have four radio buttons (that code is towards the top). When a button is selected, info comes up using "displayText". I want to attach an onclick handler to launch a function that deletes/closes that div when reset button is hit. Someone suggested this but I can't get it to work. document.getElementById("info").remove();
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Infotech 550 Form</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <!-- jQuery library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!-- Popper JS --> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <!-- Latest compiled JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> <style> #form { margin-top: 30px; margin-left: 30px; } .infoText { margin-left: 20px; color: blue } p.padding2 { padding-top: 1%; margin-left: 30px; color: indigo } </style> <script> function textToDisplay (radioValue){ var displayText = ""; if (radioValue =="1"){ displayText = "I have no use for audio products in my library" } else if (radioValue == "2"){ displayText = "Not very interested in using Audacity for anything in my library" } else if (radioValue == "3"){ displayText = "Interesting program but no practical application at this time" } else if (radioValue == "4"){ displayText = "I am going to learn more, I think there are ways Audacity could be useful in my library" } else if (radioValue == "5"){ displayText = "I am going to use Audacity in my library for a local audio history project" } return (displayText); } // modify DOM function function modifyDOM (radioInput) { console.log(radioInput.name + " + " + radioInput.value); var displayText = textToDisplay(radioInput.value); var insertionNode = document.getElementById("radioButtons"); var infoNode = document.getElementById("info"); if (infoNode === null) { console.log("infoNode does not exist yet."); var node = document.createElement("DIV"); // console.log(node); node.setAttribute("id", "info"); node.className = "form-text infoText"; var textnode = document.createTextNode(displayText); node.appendChild(textnode); insertionNode.appendChild(node); } else { console.log("infoNode DOES exist."); infoNode.innerHTML = displayText; } function clearResult(){ document.getElementById("info").remove(); } } // test how many checkboxes selected // function checkboxesSelected (checkboxes, errorString) { console.log("checkboxesSelected function"); // keep a count of how many checkboxes have been selected ... initially zero // have to use var cbSelected = 0; // 2) Good practice to have var when declaring a variable ...not doing it in our JavaScript examples to not add more complexity. var cbSelected = 0; // for loop: first need an index i to iterate through array of checkboxes; // start at beginning of array of checkboxes // i=0 means we start at beginning of array // test if all elements of array have been tested... know if i < checkboxes.length that we have still elements to examine // i-- means that we subtract -1 from i for (i=0; i<checkboxes.length; i++) { // test if current checkbox is checked ... if yes, add 1 to counter if (checkboxes[i].checked) { // increment counter cbSelected += 1; } } // test how many checkboxes have been selected ... // if checkboxesSelected equal to 0, then we have not and return errorString if (cbSelected <= 1) { return (errorString); } else { return ""; } } // validate function that calls other functions and acculumates errorString and test if this is empty or not // function validate (form) { console.log("validate form"); var fail = ""; fail += checkboxesSelected(form.bed_extras, "At least TWO Audacity uses need to be selected.\\n") if (fail == "") return true else { alert(fail); return false } } </script> </head> <body> <div class="container-fluid"> <nav class="navbar navbar-expand-md bg-dark navbar-dark"> <!-- Brand --> <a class="navbar-brand" href="#">AVM Game</a> <!-- Toggler/collapsibe Button --> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar"> <span class="navbar-toggler-icon"></span> </button> <!-- Navbar links --> <div class="collapse navbar-collapse" id="collapsibleNavbar"> <!-- Links --> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#">Home</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle active" href="#" id="navbardrop" data-toggle="dropdown"> Infotech 550 </a> <div class="dropdown-menu"> <a class="dropdown-item" href="Ex4_review.html">Open Source Tool Review</a> <a class="dropdown-item" href="Ex4_form.html">Feedback Form</a> </div> </li> <li class="nav-item dropdown"> <a class="nav-link" href="#" id="navbardrop" data-toggle="dropdown"> Interests </a> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Interest 1</a> <a class="dropdown-item" href="#">Interest 2</a> <a class="dropdown-item" href="#">Interest 3</a> </div> </li> <li class="nav-item"> <a class="nav-link" href="#">About</a> </li> </ul> </div> </nav> <div> <h1>Open-Source Project Data Collection</h1> <h2>(Thank you for participating in our study)</h2> </div> <form id="form" method="post" action="mailto:stephentruddy@yahoo.com" onsubmit="return validate(this)"> <fieldset id="personal" class="form-group"> <legend>Personal Data</legend> <div class="form-inline"> <label for="firstname" class="mr-sm-2">First Name:</label> <input type="text" class="form-control mb-2 mr-sm-2" id="firstname" name="firstname" placeholder="Enter First Name" required> </div> <div class="form-inline"> <label for="lastname" class="mr-sm-2">Last Name:</label> <input type="text" class="form-control mb-2 mr-sm-2" id="lastname" name="lastname" placeholder="Enter Last Name" required> </div> <div class="form-inline"> <label for="email" class="mr-sm-2">Email:</label> <input type="email" class="form-control mb-2 mr-sm-2" id="email" name="email" placeholder="Enter A Valid Email" required> </div> <div class="form-inline"> <label for="state" class="mr-sm-2">State:</label> <input type="text" class="form-control mb-2 mr-sm-2" id="state" name="state" placeholder="Enter Two Letter State " pattern="[AZ]{2}" title="State needs to be TWO CAPITAL letters"]required> </div> <div class="form-inline"> <label for="firstname" class="mr-sm-2">Zipcode:</label> <input type="text" class="form-control mb-2 mr-sm-2" id="zipcode" name="zipcode" placeholder="Enter 5 Digit Zipcode " pattern="[0-9]{5}" title="Zipcode needs to be 5 numbers"] required > </div> </fieldset> <fieldset> <legend>Questions About Audacity</legend> <label>Rate your interest in using Audacicity in your library (1 being lowest):</label> <div id="radioButtons" class="form-group"> <div class="form-check-inline"> <label class="form-check-label"> <input type="radio" class="form-check-input" name="bed_size" value="1" required onclick="modifyDOM(this)"> 1</label> </div> <div class="form-check-inline"> <label class="form-check-label"> <input type="radio" class="form-check-input" name="bed_size" value="2" required onclick="modifyDOM(this)"> 2</label> </div> <div class="form-check-inline"> <label class="form-check-label"> <input type="radio" class="form-check-input" name="bed_size" value="3" required onclick="modifyDOM(this)"> 3</label> </div> <div class="form-check-inline"> <label class="form-check-label"> <input type="radio" class="form-check-input" name="bed_size" value="4" required onclick="modifyDOM(this)"> 4</label> </div> <div class="form-check-inline"> <label class="form-check-label"> <input type="radio" class="form-check-input" name="bed_size" value="5" required onclick="modifyDOM(this)"> 5</label> </div> </div> <label>How would use Audacity (check at least TWO options)</label> <div id="checkboxes" class="form-group"> <div class="form-check form-check-inline"> <label class="form-check-label"> <input type="checkbox" class="form-check-input" name="bed_extras" value="oralhistory"> Oral History </label> </div> <div class="form-check form-check-inline"> <label class="form-check-label"> <input type="checkbox" class="form-check-input" name="bed_extras" value="multimedia"> Multimedia </label> </div> <div class="form-check form-check-inline"> <label class="form-check-label"> <input type="checkbox" class="form-check-input" name="bed_extras" value="dailynews"> Daily News </label> </div> <div class="form-check form-check-inline"> <label class="form-check-label"> <input type="checkbox" class="form-check-input" name="bed_extras" value="podcast"> Podcasts </label> </div> <div class="form-check form-check-inline"> <label class="form-check-label"> <input type="checkbox" class="form-check-input" name="bed_extras" value="natual world"> The Natural World </label> </div> </div> </fieldset> <input type="submit" value="Submit" name="submit"> <input type="reset" value="Reset" name="reset" onclick="clearResult(this)"> </form> <footer><p class="padding2">c. New World InfoTechnologies Corporation</p></footer> </body> </html>
1 answers
solution1
0 2021-10-29 00:47:19
You had your clearResult function inside the scope of your modifyDOM function. Move it to the global scope to call it directly from your html onclick handler.
function textToDisplay(radioValue) { var displayText = ""; if (radioValue == "1") { displayText = "I have no use for audio products in my library" } else if (radioValue == "2") { displayText = "Not very interested in using Audacity for anything in my library" } else if (radioValue == "3") { displayText = "Interesting program but no practical application at this time" } else if (radioValue == "4") { displayText = "I am going to learn more, I think there are ways Audacity could be useful in my library" } else if (radioValue == "5") { displayText = "I am going to use Audacity in my library for a local audio history project" } return (displayText); } // modify DOM function function modifyDOM(radioInput) { console.log(radioInput.name + " + " + radioInput.value); var displayText = textToDisplay(radioInput.value); var insertionNode = document.getElementById("radioButtons"); var infoNode = document.getElementById("info"); if (infoNode === null) { console.log("infoNode does not exist yet."); var node = document.createElement("div"); // console.log(node); node.setAttribute("id", "info"); node.className = "form-text infoText"; var textnode = document.createTextNode(displayText); node.appendChild(textnode); insertionNode.appendChild(node); } else { console.log("infoNode DOES exist."); infoNode.innerHTML = displayText; } } function clearResult() { var info = document.getElementById("info"); var infoParent = document.getElementById("radioButtons") infoParent.removeChild(info) } // test how many checkboxes selected // function checkboxesSelected(checkboxes, errorString) { console.log("checkboxesSelected function"); // keep a count of how many checkboxes have been selected ... initially zero // have to use var cbSelected = 0; // 2) Good practice to have var when declaring a variable ...not doing it in our JavaScript examples to not add more complexity. var cbSelected = 0; // for loop: first need an index i to iterate through array of checkboxes; // start at beginning of array of checkboxes // i=0 means we start at beginning of array // test if all elements of array have been tested... know if i < checkboxes.length that we have still elements to examine // i-- means that we subtract -1 from i for (i = 0; i < checkboxes.length; i++) { // test if current checkbox is checked ... if yes, add 1 to counter if (checkboxes[i].checked) { // increment counter cbSelected += 1; } } // test how many checkboxes have been selected ... // if checkboxesSelected equal to 0, then we have not and return errorString if (cbSelected <= 1) { return (errorString); } else { return ""; } } // validate function that calls other functions and acculumates errorString and test if this is empty or not // function validate(form) { console.log("validate form"); var fail = ""; fail += checkboxesSelected(form.bed_extras, "At least TWO Audacity uses need to be selected.\\n") if (fail == "") return true else { alert(fail); return false } }
#form { margin-top: 30px; margin-left: 30px; } .infoText { margin-left: 20px; color: blue } p.padding2 { padding-top: 1%; margin-left: 30px; color: indigo }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Infotech 550 Form</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <!-- jQuery library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!-- Popper JS --> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <!-- Latest compiled JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> </head> <body> <div class="container-fluid"> <nav class="navbar navbar-expand-md bg-dark navbar-dark"> <!-- Brand --> <a class="navbar-brand" href="#">AVM Game</a> <!-- Toggler/collapsibe Button --> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar"> <span class="navbar-toggler-icon"></span> </button> <!-- Navbar links --> <div class="collapse navbar-collapse" id="collapsibleNavbar"> <!-- Links --> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#">Home</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle active" href="#" id="navbardrop" data-toggle="dropdown"> Infotech 550 </a> <div class="dropdown-menu"> <a class="dropdown-item" href="Ex4_review.html">Open Source Tool Review</a> <a class="dropdown-item" href="Ex4_form.html">Feedback Form</a> </div> </li> <li class="nav-item dropdown"> <a class="nav-link" href="#" id="navbardrop" data-toggle="dropdown"> Interests </a> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Interest 1</a> <a class="dropdown-item" href="#">Interest 2</a> <a class="dropdown-item" href="#">Interest 3</a> </div> </li> <li class="nav-item"> <a class="nav-link" href="#">About</a> </li> </ul> </div> </nav> <div> <h1>Open-Source Project Data Collection</h1> <h2>(Thank you for participating in our study)</h2> </div> <form id="form" method="post" action="mailto:stephentruddy@yahoo.com" onsubmit="return validate(this)"> <fieldset id="personal" class="form-group"> <legend>Personal Data</legend> <div class="form-inline"> <label for="firstname" class="mr-sm-2">First Name:</label> <input type="text" class="form-control mb-2 mr-sm-2" id="firstname" name="firstname" placeholder="Enter First Name" required> </div> <div class="form-inline"> <label for="lastname" class="mr-sm-2">Last Name:</label> <input type="text" class="form-control mb-2 mr-sm-2" id="lastname" name="lastname" placeholder="Enter Last Name" required> </div> <div class="form-inline"> <label for="email" class="mr-sm-2">Email:</label> <input type="email" class="form-control mb-2 mr-sm-2" id="email" name="email" placeholder="Enter A Valid Email" required> </div> <div class="form-inline"> <label for="state" class="mr-sm-2">State:</label> <input type="text" class="form-control mb-2 mr-sm-2" id="state" name="state" placeholder="Enter Two Letter State " pattern="[AZ]{2}" title="State needs to be TWO CAPITAL letters" ]required> </div> <div class="form-inline"> <label for="firstname" class="mr-sm-2">Zipcode:</label> <input type="text" class="form-control mb-2 mr-sm-2" id="zipcode" name="zipcode" placeholder="Enter 5 Digit Zipcode " pattern="[0-9]{5}" title="Zipcode needs to be 5 numbers" ] required> </div> </fieldset> <fieldset> <legend>Questions About Audacity</legend> <label>Rate your interest in using Audacicity in your library (1 being lowest):</label> <div id="radioButtons" class="form-group"> <div class="form-check-inline"> <label class="form-check-label"> <input type="radio" class="form-check-input" name="bed_size" value="1" required onclick="modifyDOM(this)"> 1</label> </div> <div class="form-check-inline"> <label class="form-check-label"> <input type="radio" class="form-check-input" name="bed_size" value="2" required onclick="modifyDOM(this)"> 2</label> </div> <div class="form-check-inline"> <label class="form-check-label"> <input type="radio" class="form-check-input" name="bed_size" value="3" required onclick="modifyDOM(this)"> 3</label> </div> <div class="form-check-inline"> <label class="form-check-label"> <input type="radio" class="form-check-input" name="bed_size" value="4" required onclick="modifyDOM(this)"> 4</label> </div> <div class="form-check-inline"> <label class="form-check-label"> <input type="radio" class="form-check-input" name="bed_size" value="5" required onclick="modifyDOM(this)"> 5</label> </div> </div> <label>How would use Audacity (check at least TWO options)</label> <div id="checkboxes" class="form-group"> <div class="form-check form-check-inline"> <label class="form-check-label"> <input type="checkbox" class="form-check-input" name="bed_extras" value="oralhistory"> Oral History </label> </div> <div class="form-check form-check-inline"> <label class="form-check-label"> <input type="checkbox" class="form-check-input" name="bed_extras" value="multimedia"> Multimedia </label> </div> <div class="form-check form-check-inline"> <label class="form-check-label"> <input type="checkbox" class="form-check-input" name="bed_extras" value="dailynews"> Daily News </label> </div> <div class="form-check form-check-inline"> <label class="form-check-label"> <input type="checkbox" class="form-check-input" name="bed_extras" value="podcast"> Podcasts </label> </div> <div class="form-check form-check-inline"> <label class="form-check-label"> <input type="checkbox" class="form-check-input" name="bed_extras" value="natual world"> The Natural World </label> </div> </div> </fieldset> <input type="submit" value="Submit" name="submit"> <input type="reset" value="Reset" name="reset" onclick="clearResult(this)"> </form> <footer> <p class="padding2">c. New World InfoTechnologies Corporation</p> </footer> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
clear a text field depending on which radio button
How to clear text inside text field when radio button is select
How to clear radio button in Javascript?
Clear text area on radio button click and get text instead of value jquery
Clear button in input[text]
Align text with radio button
How to get radio button value and clear checked radio button in table
Button to Clear text with Bootstrap
Onclick of Radio button listbox cant be Clear in Jquery
Clear dropdown selection on radio button click
Related Tags