javascript - 按钮上的值与文本框中一样

Question

我有一个跟踪发货的模式，我想在其中输入文本框中的按钮值。

我已经尝试过了，但是没有用。

请帮我解决错误。

<script>
	window.onload = function(){
document.getElementById('cno').addEventListener('keyup', function() {
    document.getElementById('cnor').value = this.value;
})};
</script>
<div class="modal fade" id="track"			tabindex="-1" role="dialog" 
											aria-labelledby="trackLabel" aria-hidden="true">

										  	<div class="modal-dialog modal-lg">
											    <div class="modal-content">
											      	<div class="modal-header">
												        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
												        <h3 class="modal-title" id="trackLabel">Track Your Shipment.</h3>
											      	</div>

											      	<div class="modal-body">
														<form id="Track">
														<div class="row">
															<div class="col-md-6">
																<div class="form-group">
																    <label for="name">Enter Consignment Number</label>
																    <input id="cno" name="cno" type="text" class="form-control"  required="" placeholder="Eg.:- JU05GHY1532" onkeyup="function()"><button type="submit" id="cnor" name="cnor" class="btn btn-primary btn-lg">Track</button>
																</div>
															</div>
															
													</form>
											      </div>
											    </div><!--/.modal-content-->
										  	</div><!--/.modal-dialog-->
										</div><!-- Modal END -->

Answer 1

您需要等到元素加载完毕，因此将代码移动到 window.onload 回调或在标记中的元素之后添加代码。

如果要更新按钮中显示的文本内容，请更新textContent或 innerHTML属性(property)及使用Html5 input同步更新事件。

window.onload = function(){
  document.getElementById('cno.').addEventListener('input', function() {
    document.getElementById('cno.r').textContent = this.value;
  });
}

<script>
  window.onload = function() {
    document.getElementById('cno.').addEventListener('input', function() {
      document.getElementById('cno.r').textContent = this.value;
    });
  }
</script>
<div class="modal fade" id="track" tabindex="-1" role="dialog" aria-labelledby="trackLabel" aria-hidden="true">

  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h3 class="modal-title" id="trackLabel">Track Your Shipment.</h3>
      </div>

      <div class="modal-body">
        <form id="Track">
          <div class="row">
            <div class="col-md-6">
              <div class="form-group">
                <label for="name">Enter Consignment Number</label>
                <input id="cno." name="cno." type="text" class="form-control" required="" placeholder="Eg.:- JU05GHY1532"><button type="submit" id="cno.r" name="cno.r" class="btn btn-primary btn-lg">Track</button>
              </div>
            </div>

        </form>
        </div>
      </div>
    </div>
  </div>

<div class="modal fade" id="track" tabindex="-1" role="dialog" aria-labelledby="trackLabel" aria-hidden="true">

  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h3 class="modal-title" id="trackLabel">Track Your Shipment.</h3>
      </div>

      <div class="modal-body">
        <form id="Track">
          <div class="row">
            <div class="col-md-6">
              <div class="form-group">
                <label for="name">Enter Consignment Number</label>
                <input id="cno." name="cno." type="text" class="form-control" required="" placeholder="Eg.:- JU05GHY1532"><button type="submit" id="cno.r" name="cno.r" class="btn btn-primary btn-lg">Track</button>
              </div>
            </div>

        </form>
        </div>
      </div>
    </div>
  </div>
  <script>
    document.getElementById('cno.').addEventListener('input', function() {
      document.getElementById('cno.r').textContent = this.value;
    });
  </script>

---

仅供引用:在 id 中使用 . 不是最佳实践。更好地保持其作为有效标识符的值(value)。

来自 MDN docs :

Note: Using characters except ASCII letters and digits, '_', '-' and '.' may cause compatibility problems, as they weren't allowed in HTML 4. Though this restriction has been lifted in HTML 5, an ID should start with a letter for compatibility.