Question

我如何显示名称“First Textbox Name”，我尝试了很多东西，但似乎没有任何效果。

这是其他文本框中的文本框。

<td>FirstTextbox Name: 
   <input id="box1" name="box1" class="nosonly" type="text" oninput="calculate()" /></td> 
</td>    

<script>
       var x =  document.getElementById("box1").WhatwouldGohere?

       alert(x);

</script>

Answer 1

文本框没有结束标记，因此不能有任何innerHTML。

但是，您可以访问文本框的其他方面。另外，请勿使用内联HTML事件属性（onclick，onmousover等）。即使你看到它们在任何地方都被使用，但这只是因为很多新的JavaScript人都习惯了。有 many reasons 不使用它们。

// Get a reference to the textbox
var tb = document.getElementById("box1");

// Set up the event handler in JavaScript, not HTML
tb.addEventListener("input", calculate);

function calculate(){
  // You can access HTML attributes as object properties:
  console.clear();
  
  // To get the content of the parent element, use the parentElement property
  // Then, access the textContent of that element to only get text (and not
  // nested child elements). Finally, strip off any leading or trailing 
  // spaces from that value (if desired) with .trim()
  var parentText = this.parentElement.childNodes[0].textContent.trim();
  
  alert("The text that preceeds the textbox is: " + parentText);
  console.log("The name of the textbox is: " + box1.name);
  console.log("There are " + this.value.length + " characters in the box.");
  console.log("The value of the box is: " + this.value);
}

<td>FirstTextbox Name: 
   <input id="box1" name="box1" class="nosonly" type="text"> 
</td>

但是，您的问题已经询问了文本框的“标签”，结果发现实际上有一个 <label> 元素可以并且应该使用，因为它创建了一个更易于访问的UI并使这更容易：

// Get a reference to the textbox and the label
var tb = document.getElementById("box1");
var lbl = document.querySelector("label[for=box1]");

// Set up the event handler in JavaScript, not HTML
tb.addEventListener("input", calculate);

function calculate(){
  // You can access HTML attributes as object properties:
  console.clear();  
  alert("The text that preceeds the textbox is: " + lbl.textContent);
  console.log("The name of the textbox is: " + box1.name);
  console.log("There are " + this.value.length + " characters in the box.");
  console.log("The value of the box is: " + this.value);
}

<td>
   <label for="box1">FirstTextbox Name:</label> 
   <input id="box1" name="box1" class="nosonly" type="text"> 
</td>

Answer 2

好吧，你犯了一个基本的错误，许多人没有使用过DOM模型。请记住，代码应该在初始化DOM之后执行，因此如果要显示textarea的名称，请执行以下操作，因为您可以看到使用jQuery：

datetime.timedelta()

如果没有标签标签（BTW不是很聪明）：

<td>
  <label>Label for Box 1</label>
  <textarea id="box1"></textarea>
</td>

<script>
$(function() {
   alert("My box name is "+ $('#box1').prevAll('label').html());
});
</script>

您的初始代码显示您正在使用jQuery。

这是您的html与上述代码结合使用的简单表示：

<td>FirstTextbox Name: 
   <input id="box1" name="box1" class="nosonly" type="text" oninput="calculate()" /></td> 
</td> 

<script>
$(function() {
   alert("My box name is "+ $('#box1').parent().text());
});
</script>

提醒alert($('<div>').html('<td>FirstTextbox Name: <input id="box1" name="box1" class="nosonly" type="text" /></td>').find('#box1').parent().text());

Answer 3

试试这个

<script>
function calculate() {
   var x =  $('#box1').val();
   alert(x);
}
</script>

Answer 4

<script>
   function calculate() {
      var x =  $('#box1').attr('name')
      alert(x);
   }
</script>

这会提醒您文本框的名称。

或者您可以执行编辑：

<script>
   function calculate() {
     var x =  document.getElementById("box1").getAttribute('name');
     alert(x);
   }
</script>

显示带有警报

4 个答案: