Question

我正在尝试为用户创建在线待办事项列表，我希望它能够正常运行，这样当您输入任务并单击“JotIT”按钮时，任务就会被附加。

到目前为止，附加功能有效，但由于某些原因文本不可见，即使我检查它时，文本也显示在HTML中。

<script>
    var welcome = 'Welcome To JotIT';

    var jotItem = function()
        {
            //Create & Get the necessary elements
            var item = document.createElement('input'),
            space = document.createElement('br'),
            form = document.getElementById("listing"),
            frag = document.createDocumentFragment(),
            textVal = document.getElementById("input-jot");

            //Set Attributes to list item
            item.setAttribute('type', 'checkbox');
            item.setAttribute('name', 'jot-list');

            //If there is no input in the textbox then create an alert popup
            if(textVal.value === "")
                alert("Please insert a value");
            else {
                item.innerHTML = textVal.value;
                frag.appendChild(item);
                frag.appendChild(space);
                form.appendChild(frag);
                textVal.value = ""; 
            }
        }
</script>

</head>
  <body>
    <h1 id="head">JotIT</h1><br>
    <p> <script type="text/javascript">document.write(welcome);</script></p>
    <input type="form" id= "input-jot">
    <button class = 'btn-info' id="jot-down" onclick=jotItem();>JotIt!</button>
    <!-- TODO: Add form submit tag instead of ul tag -->
    <!-- TODO: Align the list items -->
    <form id = "listing" method="get">
        <input type="checkbox" name="me"> Start </input>

    </form>

  </body>

Answer 1

您必须插入标签。输入应该是自闭/空元素。特别是类型复选框的输入不能正确显示标签。请将label元素用于此目的。

＆＃13;

    var welcome = 'Welcome To JotIT';

    var jotItem = function() {
      //Create & Get the necessary elements
      var item = document.createElement('input'),
        label = document.createElement('label'),
        space = document.createElement('br'),
        form = document.getElementById("listing"),
        frag = document.createDocumentFragment(),
        textVal = document.getElementById("input-jot");

      //Set Attributes to list item
      item.setAttribute('type', 'checkbox');
      item.setAttribute('name', 'jot-list');

      //If there is no input in the textbox then create an alert popup
      if (textVal.value === "")
        alert("Please insert a value");
      else {
        label.innerText = textVal.value;
        frag.appendChild(label);  // here goes the label
        frag.appendChild(item);
        frag.appendChild(space);
        form.appendChild(frag);
        textVal.value = "";
      }
    }

＆＃13;

</head>

<body>
  <h1 id="head">JotIT</h1>
  <br>

  <input type="form" id="input-jot">
  <button class='btn-info' id="jot-down" onclick=jotItem();>JotIt!</button>
  <!-- TODO: Add form submit tag instead of ul tag -->
  <!-- TODO: Align the list items -->
  <form id="listing" method="get">
    <label>Start</label>
    <input type="checkbox" name="me" />

  </form>

</body>

＆＃13;

Answer 2

这与您错误地将标签添加到输入的事实有关。使用以下HTML语法，它将解决您的问题：

<label><input type="checkbox" name="jot-list" />The Text</label>

JavaScript附加元素文本未显示

2 个答案: