javascript - How to dynamically change information

2019-09-04 03:29发布

站内问答 / JavaScript
1628 1 4

(Duplicate?) I've tried several Stackoverflow postings related to this, but I cannot get a javaScript example to work. I'd like to avoid having to use jQuery, for the time being.

I want to create the information shown by radio buttons dynamically, using javascript. In this example, I would want to write a function that displays some other values for these radio buttons 'Answer 1' and 'Answer 2'. For example, 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.

screen shot multiple choice answer window

I have already learned, through my more complex project code, that a submit/save button that is hard-coded into the html <form> 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 changing hardcoded information already displayed by the radio buttons might work.

When user clicks on the submit/'save' button, I don't 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.

<html>

<script type="text/javascript">
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" );  
        }

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

</html>

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

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.

It's from Javascript how to change radio button label text? enter image description here

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

       <p>
       <input type="submit" name="submit" value="save">
       </p>
    </form>



    <script type="text/javascript">
     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" );  
            }

    }

    /*
    <input type="radio" name="sex" id="male" value="male">
            <label for="male">Male</label>
      </input>

    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
    </script>




    </html>
  • 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 <form>. I still plan to have radio answer buttons in a table, but I'm trying to make a more basic example here.

1条回答
甜甜的少女心
2楼-- · 2019-09-04 03:56

I Have made some modifications for getting label through document.getElementByTagName() and also some changes to OnSubmitForm() function. And just pasted your code with those changes below and demo link at the end.

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

   <p>
   <input type="submit" name="submit" value="save">
   </p>
</form>



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

    // http://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.getElementsByTagName('label') [0];
    // this does not work
    label.innerHTML = 'junk';
    }

//http://www.javascript-coder.com/html-form/html-form-action.phtml
function OnSubmitForm()
{
  if(document.getElementById('first').checked == true)
    {
    alert ( "You have selected the first answer" );  
    }
  else
    if(document.getElementById('second').checked == true)
        {
        alert ( "You have selected the SECOND answer" );  
        }

  return false;
}

/*
<input type="radio" name="sex" id="male" value="male">
        <label for="male">Male</label>
  </input>

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

*/
//http://stackoverflow.com/questions/32292962/javascript-how-to-change-radio-button-label-text
</script>




</html>

Demo : https://jsbin.com/sojojiy/27/edit?html,console,output

Hope this helps. Thanks !

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)