How to test which button is checked of an existing radio buttons family?

p5.js Coding Questions
1

Hi everyone. I’m used to write my own statitc html code into the index.html file of p5.js sketch. So I use the select() function of the DOM library to access html elements such INPUT of type text/passwordor or SELECT html elements and the use the value() function of the returned HTML object like in this sample code:

index.html

       <input id='firstname' class='inputName' type='text' placeholder='Firstname' value='John'/>
       <input id='lastname'  class='inputName' type='text' placeholder='Lastname' value='Doe'/>

js:

  firstname  = select("#firstname").value();
  lastname   = select("#lastname").value();

It also works fine with SELECT elements too. But not with elements of radio types… For instance, the following code returns an error in the browser :

index.html

        <input type="radio" name="gender" id="femaleRadio" value="female">
        <input checked type="radio" name="gender" id="maleRadio" value="male">

js.code

alert(select("gender").value());

I get the following error message into the browser (Chrome):

Uncaught TypeError: Cannot read property ‘value’ of null

I’ve found an alternative with pure Javascript (see below), but it’s embarrassing with students into a beginners lesson. It’s very easy to read value of various HTML input, excepted radio buttons…

The p5.js documentation shows samples that works fine with dynamically generated radio button :slight_smile:

https://p5js.org/reference/#/p5/createRadio

Any idea? Thanks a lot.

Laurent

Pure JS “heavy” alternative:

  genderRadios = document.getElementsByName("gender");
  
  if(genderRadios[0].checked){
 
    gender = "female";    
    
  } else if(genderRadios[1].checked) {
    
    gender = "male";
    
 }
2

According to method p5::select()'s reference: reference | p5.js :man_teacher:

Searches the page for an element with the given ID, class, or tag name (using the ‘#’ or ‘.’ prefixes to specify an ID or class respectively, and none for a tag) and returns it as a p5.Element.

When passing a String to p5::select() w/ no ‘#’ or ‘.’ prefix in it, it means that String is the <tag>'s name itself.

Here’s some online p5js sketch which I use p5::select() to get the element w/ a specified <tag> name: :upside_down_face:

createP('Temp: '.bold() + `<temp>${weather.main.temp}</temp><deg>${F}</deg>`);
createP('Wind: '.bold() + `<wind>${weather.wind.speed}</wind><vel>${MPH}</vel>`);

temp = select('temp'), deg = select('deg');
wind = select('wind'), vel = select('vel');

I don’t think p5js got any equivalent for getElementsByName(), which searches for all elements w/ a specified name attribute!

Instead p5js got p5::selectAll(): reference | p5.js
Which can search for all elements w/ a specified <tag> or a class attribute name:

Searches the page for elements with the given class or tag name (using the ‘.’ prefix to specify a class and no prefix for a tag) and returns them as p5.Elements in an array.

3 
<!DOCTYPE html>
<html>
<body>

<form action="#" method="get">
  <input type="radio" name="gender" value="male" checked> Male<br>
  <input type="radio" name="gender" value="female"> Female<br>
  <input type="radio" name="gender" value="other"> Other  <br>
  <br>
  
  <input type="text" id="csel" size="50"> 
</form> 


<script>
    var options = document.forms[0];
    var txt = "";
    var i;
    for (i = 0; i < options.length; i++) {
        if (options[i].checked) {
            txt = txt + options[i].value + " ";
        }
    }    
    document.getElementById("csel").value = "Selected: " + txt;

</script>

</body>
</html>

Similar running example: https://www.w3schools.com/jsref/prop_radio_checked.asp

Kf