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

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";
    
 }

According to method p5::select()'s reference: p5js.org/reference/#/p5/select :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.

<!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