Question

我是脚本新手，我开始使用Javascript。我正在创建一个脚本，该脚本从下拉列表中获取值并使用所选值处理输入。由于javascript文件（.js）中不接受HTML，我尝试将HTML选择列表作为脚本插入，以便它可以工作。但这似乎不起作用。我在下面提供了我的代码。在Javascript中插入HTML代码需要一些帮助。提前致谢。

我的代码：

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

创建元素p后，您必须将其附加到文档中的某个位置。但首先，我会创建元素并将它们附加到p，而不是innerHTML：

＆＃13;

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);

＆＃13;

此外，获取选择框值的方法是获取所选索引，然后找到该值。

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

Answer 2

您可以将整个字符串附加到正文

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 3

两个问题：

您未能关闭所有div。看看我如何重新格式化你的问题。
您没有将元素附加到文档中。使用parent.appendChild(element)其中，element是要插入的DOmElement类型的变量，parent是您要插入的位置。

此外，不要在等号，属性及其值之间放置空格。

Answer 4

正如我在评论中所说，尝试将它们分开。

将脚本代码放在head标记内：

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

body标记内的HTML：

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

在Javascript中插入HTML代码

4 个答案: