Insert HTML code in Javascript

Question

I m new to scripting, and I started with Javascript. I m creating a script that takes value from a drop down list and process the input with the chosen value. Since HTML is not accepted in javascript files (.js) , I tried inserting the HTML select list as a script ,so that it may work. But that doesn't seem working. I have included my code below. Need some help in inserting a HTML code in Javascript. Thanks in advance.

My Code:

window.onload = function() { 

  var p = document.createElement("div")
  p.innerHTML = 'Script to calculate the eligibility of a u20 player ' +
    '<div style="padding-left:0em;"><b>U20  ELIGIBILITY  CALCULATOR</b></div>'+ 'Years : ' +
    '<div style=" display: inline-block; float: center; text-align: center;">' +        
      '<select id="x">'+
        '<option value="17">17 yrs</option>' +
        '<option value="18">18 yrs</option>' +
        '<option value="19">19 yrs</option>' +
        '<option value="20">20 yrs</option>' +
      '</select>' +
    '</div>' +
    '<input type = "button" id = "calc" value = "Calculate Age" onclick = "calc_age()"/>' + 'He will be'+
    '<input type = "text" id = "w" size="1" readonly />';
}

function calc_age()  // to find age at the registration deadline
{
  var n1,n2;
  n1=document.getElementById("x").value;
  n2=n1*2; // i have changed the operations here
  document.getElementById("w").value=n2;
}

Answer 1

After creating the element p, you'll have to append it somewhere in the document. But first, instead of innerHTML, I would create the elements and append them to p, like so:

var p = document.createElement("div");
    p.appendChild( document.createTextNode("Script to calculate the eligibility of a u20 player ") );

var el = document.createElement("div");
    el.id = "jefree";
    el.style.float = "center";
    p.appendChild(el);
// Study that for a second, creating any other element (even with nested elements) is the same way

var listEl = document.createElement("select");
    listEl.id = "x";
    for( var x = 17; x < 21; x++ ){
        var optionEl = document.createElement("option");
            optionEl.value = x;
            optionEl.appendChild( document.createTextNode(x) );
            listEl.appendChild(optionEl);
    }
    p.appendChild(listEl);

document.body.appendChild(p);

Also, the way to get a select-box's value is to get the selected index, then find that value.

var list = document.getElementById("x");
    list.options[ list.selectedIndex ].value;

Answer 2

As I said in the comment, try separating them.

Put the script code inside the head tag:

    <script>
        function calc_age(selectedValue)  // to find age at the registration deadline
        {
            selectedValue = parseInt(selectedValue.value);
            lastValue = selectedValue * 2;
            document.getElementById("w").value = lastValue;
        }
    </script>

And the HTML inside the body tag:

    <div>
        Script to calculate the eligibility of a u20 player
        <div id="jefree" style="float: center;">
            <div style="padding-left:0em;"><b>U20  ELIGIBILITY  CALCULATOR</b></div>
            Years :
            <div style=" display: inline-block; float: center; text-align: center;">
                <select id="x" onchange="calc_age(this);">
                <option value="17">17 yrs</option>
                <option value="18">18 yrs</option>
                <option value="19">19 yrs</option>
                <option value="20">20 yrs</option>
                </select>
            </div>
            <input type = "button" id = "calc" value = "Calculate Age" onclick = "calc_age()"/>

            He will be <input type = "text" id = "w" size="1" readonly />
        </div>
    </div>

Answer 3

You could append the whole string to the body

var p = '<div>Script to calculate the eligibility of a u20 player </div>';

document.body.innerHTML+=p;
document.body.innerHTML+='<div id="jefree" style="float: center;">'+
    '<div style="padding-left:0em;"><b>U20  ELIGIBILITY  CALCULATOR</b></div>'+ 'Years : ' +
    '<div style=" display: inline-block; float: center; text-align: center;">' +        
      '<select id="x">'+
        '<option value="17">17 yrs</option>' +
        '<option value="18">18 yrs</option>' +
        '<option value="19">19 yrs</option>' +
        '<option value="20">20 yrs</option>' +
      '</select>' +
    '</div>' +
    '<input type = "button" id = "calc" value = "Calculate Age" onclick = "calc_age()"/>' + 'He will be'+
    '<input type = "text" id = "w" size="1" readonly />';
function calc_age()  // to find age at the registration deadline
{
  var n1,n2;
  n1=document.getElementById("x").value;
  n2=n1*2; // i have changed the operations here
  document.getElementById("w").value=n2;
}

Answer 4

Two problems:

1. You failed to close all the divs. Look at how I reformatted your question.

2. You didn't append the element to the document. Use parent.appendChild(element) where element is the variable of type DOmElement that you want to insert and parent is where you want to insert it.

Also, do not put spaces between the equal sign, the attribute, and its value.