How can I prevent a console error with the following code? (It says the given id is not a function)

Question

I keep getting an error because my javascript says that the element declaring my ID is not a function. Thank you in advance to anyone that can help. I am sure it is a simple solution. My goal is to hide one form while the "single" radio button is clicked. (Ignore the "arm all" text, I'm not sure how it got there or how to take it off). EDIT: I have changed the function names but it seems i am still having the same issue.

 // This links form1/form2 to hide & display - onclick for group or single radio buttons function single(id, text, btn) { var groupForm = document.getElementById('form2'); var singleForm = document.getElementById('form1'); groupForm.style.visibility = 'hidden'; singleForm.style.visibility = 'visible'; } function group() { var groupForm = document.getElementById('form2'); var singleForm = document.getElementById('form1'); singleForm.style.visibility = 'hidden'; groupForm.style.visibility = 'visible'; }

 <div> <div style="position: relative; width: 100%;"> <div id="form2" class="form"> <select name="sendingfrom" class="click-op"> <option value="group-select">arm</option> <option value="group-select">all</option> </select> </div> <div id="form1" class="form"> <select name="sendingfrom" class="click-op2"> <option value="group-select">waist</option> <option value="group-select">shoulder</option> <option value="group-select">elbow</option> <option value="group-select">wrist_angle</option> <option value="group-select">wrist_rotate</option> <option value="group-select">left_finger</option> </select> </div> </div> <!--onclick value links to javascript--> <input class="radio-group" type="radio" id="group" name="group-or-single" value="group" onclick="group()">  <label class="text-group" style="color: black; padding-left: 0px;" for="group">Group</label> <!--onclick value links to javascript--> <input class="radio-single" type="radio" id="single" name="group-or-single" value="single" onclick="single()">  <label class="text-single" style="color: black; padding-left: 0px;" for="single">Single</label> </div>

Answer 1

You can use the try catch finally statement, but first in the HTML is the names of the function wrong written. This porblem you cannot solve with the solution i mentioned, only if you using eventlisteners in the javascript code.

In this snippet I corrected the misspeled function names, and i made the try catch blocks for you as an exmaple.

 // This links form1/form2 to hide & display - onclick for group or single radio buttons function single(id, text, btn) { try { var groupForm = document.getElementById('form2'); var singleForm = document.getElementById('form1'); groupForm.style.visibility = 'hidden'; singleForm.style.visibility = 'visible'; } catch { console.log("does not work"); } } function group() { try { var groupForm = document.getElementById('form2'); var singleForm = document.getElementById('form1'); singleForm.style.visibility = 'hidden'; groupForm.style.visibility = 'visible'; } catch { console.log("does not work"); } }

 <div id="form3" class="form"> <select name="sendingfrom" class="click-op2"> <option value="group-select">waist</option> <option value="group-select">shoulder</option> <option value="group-select">elbow</option> <option value="group-select">wrist_angle</option> <option value="group-select">wrist_rotate</option> <option value="group-select">left_finger</option> </select> </div> <!--onclick value links to javascript--> <input class="radio-group2" type="radio" id="group2" name="group-or-single" value="group" onclick="group()"> <label class="text-group2" style="color: black; padding-left: 0px;" for="group">Group</label> <!--onclick value links to javascript--> <input class="radio-single2" type="radio" id="single2" name="group-or-single" value="single" onclick="single()"> <label class="text-single2" style="color: black; padding-left: 0px;" for="single">Single</label> javascript html

Use Try Catch statement. Mozilla