时间戳

首页 > 解决方案 > 获取一个元素 id，然后在 getElmentByID 中使用它来触发点击函数

javascript - 获取一个元素 id，然后在 getElmentByID 中使用它来触发点击函数

问题描述

function getId(e){
  var xid = e.target.id;
  console.log(xid);
}    
<form onclick="getId(event)">
    <label for="name" id="I am an Span">Nombre</label><br>
    <input type="text" name="name" id="tbx_nombre"> <br>
    <span id="nombre"></span> <br>
</form>
<div id="result"></div>

当用户单击 texbox 时，该函数获取元素的 id，然后使用拆分后的文本框 id 调用 deleteSpan 方法，该 id 现在是要更改为 emply 字符串的 span 的 id。我收到此错误Cannot set property 'onclick' of null at getId 

<form onclick="getId(event)">
  <input type="text" name="name" id="tbx_name"><br>
  <span id="name"></span>
   ...MORE INPUTS AND SPAN TAGS...
</form>

JS

function getId(e){
  var xid = e.target.id;    // => tbx_name
  var spanId = xid.split("_").pop(); // =>name
  document.getElementById(xid).onclick = function(){deleteSpan(spanId)};
}

function deleteSpan(spanId){
  document.getElementById(spanId).innerHTML = "";
}

标签： javascripthtml

解决方案

onclick 属性事件处理程序应该在input而不是form

<form>
  <input type="text" name="name" id="tbx_name" onclick="getId(event)"><br>
  <span id="name"></span>
</form>

甚至更好，addEventListener用于具有 id 格式的输入tbx_{{value}}

var allInputs = document.querySelectorAll("input[id^='tbx_']");
allInputs.forEach( s => s.addEventListener( "click", e => getId ));

form您可以在加载（在document load或window load时）调用上述代码。

推荐阅读