在 Javascript 中插入 HTML 代码

Question

我是脚本编写的新手，我从 Javascript 开始。我正在创建一个脚本，该脚本从下拉列表中获取值并使用所选值处理输入。由于 HTML 在 javascript 文件 (.js) 中不被接受，我尝试将 HTML select 列表作为脚本插入，以便它可以工作。但这似乎不起作用。我在下面包含了我的代码。在 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，如下所示：

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

此外，获取 select-box 值的方法是获取 selected 索引，然后找到该值。

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

Answer 2

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

将脚本代码放在 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>

Answer 3

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

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

两个问题：

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

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

在 Javascript 中插入 HTML 代码

Insert HTML code in Javascript

html

javascript

userscripts