For loop created input with array content, adds data when inspected but not displaying in browser

Question

My for loop creates and populates radio buttons from data within an array, when I run the loop it creates the input element then applies array data and continues, through debugging or inspecting the DOM.

The data expected is within the element but won't display in any browser, I'm embedding script and loading bootstrap, I can't understand why?

HTML:

<form name="formName">
    <div class="form-group" id="demo">
        <label for="exampleFormControlSelect1">Select Course</label>
    </div>
    <button onClick="DisplayTex()" class="btn btn-primary" type="button">Display</button>
</form>

Javascript:

var course = ["Software Engineering", "Computer Science", "Interactive Multimedia", "Information Communication Technology"];
var courseVal = ["softW", "compS", "InterM", "iCT"];

function DisplayTex(){
    if (document.getElementById("university").value == "uniUlster"){
        for (var i = 0; i < course.length; i++) {
            //text += course[i] + "</input> <br>";
            var input = document.createElement('INPUT');
            input.type = 'radio';
            input.textContent = course[i];
            var x = 0;
            x++
            for(var y = 0; y < x; y++){
                input.value = courseVal[y];
            }
            document.getElementById("demo").appendChild(input);
        }
    }
}

I still have more to debug with the nested for loop but firstly its getting the array course to display elements on the browser.

This might help: https://stackoverflow.com/questions/17378199/uncaught-referenceerror-function-is-not-defined-with-onclick — Frank Fajardo, Jul 28 '19 at 23:29
I don't understand why you have a 2nd for loop inside the 1st for loop. course and courseVal look the same to me. So, when you do 'input.textContent = course[i];' I think all you nned next is 'input.value = courseVal[i];'. No need for the 2nd for loop, remove it and the x = 0 and x++ also. — CharlesEF, Jul 28 '19 at 23:33
You're completely right CharlesEF, good spot and should have caught that too — Jay.Smyth, Jul 29 '19 at 01:02

score 0 · Answer 1 · answered Jul 28 '19 at 23:44

radio / checkbox inputs don't display their textContent. If you want a text label for your radio button, you can wrap a label around it:

label { display: block; }

<label>
  <input type="radio" name="foobar" value="blue">
  Take the blue pill
</label>
<label>
  <input type="radio" name="foobar" value="red">
  Take the red pill
</label>

You could e.g. do something like this in your code to get the labels:

var course = ["Software Engineering", "Computer Science", "Interactive Multimedia", "Information Communication Technology"];
var courseVal = ["softW", "compS", "InterM", "iCT"];

function DisplayTex() {
  for (var i = 0; i < course.length; i++) {
    var input = document.createElement('input');
    input.type = 'radio';
    input.value = courseVal[i];
    input.name = "exampleFormControlSelect1";

    var label = document.createElement('label');
    label.appendChild(input);
    label.appendChild(
      document.createTextNode(course[i])
    );
    document.getElementById("demo").appendChild(label);
  }
}

#demo label { display: block; margin-left: 12px; }

<form name="formName">
  <div class="form-group" id="demo">
    <div>Select Course</div>
  </div>
  <button onClick="DisplayTex()" class="btn btn-primary" type="button">Display</button>
</form>

For loop created input with array content, adds data when inspected but not displaying in browser

1 Answers1