时间戳

首页 > 解决方案 > 在输入文本输入时，打印在跨度（jsbin）中输入的内容只能针对 ID 而不是 NAME att

javascript - 在输入文本输入时，打印在跨度（jsbin）中输入的内容只能针对 ID 而不是 NAME att

问题描述

我正在学习 javascript 。. .

https://jsbin.com/togalivavu/1/edit?html,js,输出

我无法控制 html。输入标签没有 ID 属性，只有名称属性和唯一的类包装器。我在jsbin中添加了一个ID只是为了测试。

我尝试了几种方法来定位 name 属性，但除非我使用 getElementById()，否则我无法让它工作。

我如何定位 name 属性？

<div class="home_page_title">
    <input id="nameField" type="text" name="Accessable[accsc_home_page_title]" value="Home test" data-depend-id="accsc_home_page_title">
    <span id='outputAccHomePagePermalink'>??</span>
</div>

window.onload = function() {

  var nameField = document.getElementById('nameField');
  var lastNameValue = undefined;

  updateNameDisplay();
  setInterval(updateNameDisplay, 100);
  
  function updateNameDisplay() {
    var thisValue = nameField.value || "??";
    if (lastNameValue != thisValue) {
      document.getElementById('outputAccHomePagePermalink').innerHTML = lastNameValue = thisValue;
    }
  }
};

标签： javascript

解决方案

要根据其name属性查找元素，您可以使用其中一个document.querySelector并使用 CSS 属性选择器

document.querySelector('[name="Accessable[accsc_home_page_title]"]');

或者您可以使用 olddocument.getElementsByName它将返回元素列表而不是单个匹配，因此您可能希望使用以下方式定位第一个元素[0]：

document.getElementsByName('Accessable[accsc_home_page_title]')[0];

话虽如此，您不想setInterval用于这项工作；input相反，您希望您的代码在值更改时准确运行。为此，Javascript 和 DOM 具有addEventListener(), 并且，只要输入中的值被任何用户方法更改，input事件就会立即执行：

window.onload = function() {
  const nameField = document.querySelector('[name="Accessable[accsc_home_page_title]"]');
  nameField.addEventListener('input', function() {
    document.getElementById('outputAccHomePagePermalink').textContent = this.value;
  })  
};
<div class="home_page_title">
    <input id="nameField" type="text" name="Accessable[accsc_home_page_title]" value="Home test" data-depend-id="accsc_home_page_title">
    <span id='outputAccHomePagePermalink'>??</span>
</div>

推荐阅读