javascript - How to dynamically change information displayed by radio button?
<p>(Duplicate?) I've tried several Stackoverflow postings related to this, but I cannot get a javaScript example to work. I'd like to <strong>avoid having to use jQuery</strong>, for the time being.</p>

<p>I want to create the <strong>information shown by radio buttons dynamically</strong>, using <strong>javascript</strong>. In this example, I would want to write a function that displays some other values for these <strong>radio buttons</strong> 'Answer 1' and 'Answer 2'. <em>For example,</em> I don't actually want 'Answer 1'.  Goal is for the user to click on one of the multiple choice answers, then hit submit/save to self-check their own knowledge. </p>

<p><a href="https://i.stack.imgur.com/OevR6.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/OevR6.png" alt="screen shot multiple choice answer window"></a> </p>

<p>I have already learned, through my more complex project code, that a submit/save button that is hard-coded into the html <code>&lt;form&gt;</code> section does not seem to associate with values displayed by the radio buttons, that I managed to add in using javaScript * It seems to me that <strong>changing hardcoded information</strong> <strong>already displayed</strong> by the radio buttons <em>might</em> work.  </p>

<p>When user clicks on the submit/'save' button, I <strong>don't</strong> need to refer to the actual answer information that the radio button is displaying. I only need to know whether , in this case, it's the first or second answer chosen.</p>

<pre><code>&lt;html&gt;

&lt;script type="text/javascript"&gt;
function OnSubmitForm()

{
  if(document.myform.operation[0].checked == true)
    {
    alert ( "You have selected the first answer" );  
    }
  else
    if(document.myform.operation[1].checked == true)
        {
        alert ( "You have selected the SECOND answer" );  
        }

}
&lt;/script&gt;
&lt;form name="myform" onsubmit="return OnSubmitForm();"&gt;
   &lt;input type="radio" name="operation" value="1" checked&gt;Answer 1
   &lt;input type="radio" name="operation" value="2"&gt;Answer 2
   &lt;p&gt;
   &lt;input type="submit" name="submit" value="save"&gt;
   &lt;/p&gt;
&lt;/form&gt;

&lt;/html&gt;
</code></pre>

<p>(I don't know if I should include this following example I tried as well)</p>

<p>BTW Here is another of the example I tried - a posting  but I cannot get this idea to work . I was trying to get the first radio button to display 'junk' instead of 'Answer1' as originally hard coded. But I have an error from code borrowed from posting, that I cannot resolve.</p>

<p>It's from
<a href="https://stackoverflow.com/questions/32292962/javascript-how-to-change-radio-button-label-text">Javascript how to change radio button label text?</a>
   <a href="https://i.stack.imgur.com/ygorC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ygorC.png" alt="enter image description here"></a></p>

<pre><code>    &lt;html&gt;
    &lt;form name="myform" onsubmit="return OnSubmitForm();"&gt;
       &lt;input type="radio" id = 'first'  name="operation" value="1" checked &lt;label for="alsoFirst"&gt; Answer 1
       &lt;input type="radio" id = 'second'  name="operation" value="2"&lt;label for="alsoSecond"&gt;Answer 2

       &lt;p&gt;
       &lt;input type="submit" name="submit" value="save"&gt;
       &lt;/p&gt;
    &lt;/form&gt;



    &lt;script type="text/javascript"&gt;
     document.addEventListener('readystatechange', function() {
      // Seems like a GOOD PRACTICE - keeps me from getting type error I was getting

        // https://stackoverflow.com/questions/14207922/javascript-error-null-is-not-an-object

        if (document.readyState === "complete") {
          init();
        }
      });

     function init() {

        console.log ("expect to change -Answer 1- displayed by first button to word junk");


         // this works
        var label = document.getElementById('first').getElementsByTagName('alsoFirst') [0];
        // this does not work
        label.innerHTML = 'junk';
        }

    //http://www.javascript-coder.com/html-form/html-form-action.phtml
    function OnSubmitForm()
    {
      if(document.myform.operation[0].checked == true)
        {
        alert ( "You have selected the first answer" );  
        }
      else
        if(document.myform.operation[1].checked == true)
            {
            alert ( "You have selected the SECOND answer" );  
            }

        if (document.uniqueName.checked == true){
            alert ( "You have selected the THIRD answer" );  
            }

    }

    /*
    &lt;input type="radio" name="sex" id="male" value="male"&gt;
            &lt;label for="male"&gt;Male&lt;/label&gt;
      &lt;/input&gt;

    var input = document.getElementById('male');
    var label = input.getElementsByTagName('label')[0];
    label.innerHTML = 'New Text';

    */
    //https://stackoverflow.com/questions/32292962/javascript-how-to-change-radio-button-label-text
    &lt;/script&gt;




    &lt;/html&gt;
</code></pre>

<ul>
<li>I previously got values from my arrays to display by  inserting table rows and concatenating strings. This worked, and went into the table, but did not tie into the submit/save button hardcoded into original <code>&lt;form&gt;</code>. I still plan to have radio answer buttons in a table, but I'm trying to make a more basic example here.</li>
</ul>