Question

如果此问题已得到解答，请直接与我联系

我正致力于创建一个移动应用程序，这是一个基于我工作中使用的表单设计的表单。此表单的一部分将要求输入必须在特定数字范围内的数字。如果输入的数字超出该数字范围，用户将需要在表格末尾输入“纠正措施”。

我有一个javascript函数来“验证”这些输入字段。我也能够在正确的位置生成相同的函数来生成<textarea>，但是当我尝试获取函数来拉取输入字段标签的内容并将其添加到生成的文本区域时不起作用。

以下是HTML表单和与输入字段关联的javascript的一小部分：

<div id="coldtemp" data-role="ui-content">

            <label for="bottomair">Maketable Air Temp (bottom)</label>
            <input data-clear-btn="true" name="bottomair" required id="bottomair" type="number" size="3" onChange="coldValidate(this)">
            <p class="tollorance"></p>
</div>

<div id="correction">

</div>

javascript：

function coldValidate(elem) {
    var lable = document.createElement("label");
    var child = elem.parentNode.getElementByTagName("label").textContent;
    //lable.appendChild(child);
    var para = document.createElement("textarea");
    var element = document.getElementById("correction");
    var x, text;
    x = +elem.value;
    if (isNaN(x) || x < 33 || x > 40) {
        text = "Temp Out of Tolerance</p>";
    } else {
        text = " ";
    }
    elem.parentNode.nextElementSibling.innerHTML = text;
    //element.appendChild(lable);
    element.appendChild(para);
}

我尝试了.getElementBy javascript方法的变体，但没有任何效果，我真的很难过。我还注释了部分“标签”代码，试图弄清楚出了什么问题，这就是lable.appendChild(child);和element.appendChild(lable);被注释掉的原因。

Answer 1

问题是您使用的是getElementByTagName("label")，这是无效的语法。你要找的是getElementsByTagName("label")[0]：

function coldValidate(elem) {
  var lable = document.createElement("label");
  var child = elem.parentNode.getElementsByTagName("label")[0].textContent;
  //lable.appendChild(child);
  var para = document.createElement("textarea");
  var element = document.getElementById("correction");
  var x, text;
  x = +elem.value;
  if (isNaN(x) || x < 33 || x > 40) {
    text = "Temp Out of Tolerance</p>";
  } else {
    text = " ";
  }
  elem.parentNode.nextElementSibling.innerHTML = text;
  //element.appendChild(lable);
  element.appendChild(para);
 }

<div id="coldtemp" data-role="ui-content">

  <label for="bottomair">Maketable Air Temp (bottom)</label>
  <input data-clear-btn="true" name="bottomair" required id="bottomair" type="number" size="3" onChange="coldValidate(this)">
  <p class="tollorance"></p>
</div>

<div id="correction">

</div>

希望这有帮助！：）

修改

您在注释代码中遇到的其他问题是由于您尝试将child变量设置为label元素的textContent，然后将其附加到标签。相反，您需要将child变量设置为标签本身，并将其附加到 element ，而不是lable：

function coldValidate(elem) { var lable = document.createElement("label"); var child = elem.parentNode.getElementsByTagName("label")[0]; var para = document.createElement("textarea"); para.setAttribute("id", "textbox"); child.setAttribute("for", "textbox"); var element = document.getElementById("correction"); var x, text; x = +elem.value; if (isNaN(x) || x < 33 || x > 40) { text = "Temp Out of Tolerance</p>"; } else { text = " "; } elem.parentNode.nextElementSibling.innerHTML = text; element.appendChild(child); element.appendChild(para); }

<div id="coldtemp" data-role="ui-content"> <label for="bottomair">Maketable Air Temp (bottom)</label> <input data-clear-btn="true" name="bottomair" required id="bottomair" type="number" size="3" onChange="coldValidate(this)"> <p class="tollorance"></p> </div> <div id="correction"> </div>

请注意，我还为新文本框提供了一个ID，并为标签指定了一个新的“for”字段，该字段与新文本框相关。

希望这有帮助！：）

将标签添加到使用javascript创建的文本区域

1 个答案: