Question

我希望我的代码获取被单击的按钮的内部文本。我正在使用一个循环，但是循环仅返回最后一个值。如果我使用它作为一个onclick的功能，它不返回任何值。

<html>
<button id="btn">esteem</button>

<button id="btn">aqas</button>

<button id="btn">umar</button>

</html>

<script>
    var elms = document.querySelectorAll("[id='btn']");

    for (var i = 0; i < elms.length; i++)
        var q1 = elms[i].textContent || elms[i].innerText; <

<? php
    $ff = "<script>document.write(q1);</script>";
    echo $ff;

?>
</script>

Answer 1

尝试一下。使用textContent属性添加文本

var buttons = document.querySelectorAll("[id='btn']");
var buttontext;
for(var i=0; i<buttons.length; i++){
    buttons[i].addEventListener("click", function(){document.querySelector('p').textContent += " " + this.innerHTML
    buttontext=this.innerHTML;
    console.log(buttontext)}
  )
}

<button id="btn">esteem</button>
<button id="btn">aqas</button>
<button id="btn">umar</button>

<p></p>

Answer 2

要回答眼前的问题，可以归结为捕获单击的按钮元素并读取内容。

此方法有一些警告，因为在HTML中定义按钮的方式有很多，例如<input type="button" value="what you see">，完全没有内容。

因此，您必须至少实现两种获取按钮文本的方式，一种是嵌套的文本元素，另一种是值属性。

function clickHandler(event) {
	const target = event.target;
  const content = target.textContent || target.getAttribute('value');

	event.preventDefault();
  
  // show output
  document.querySelector('output').innerHTML = content;
}

function clickListener(button) {
	button.addEventListener('click', clickHandler);
}

const selector = 'input[type=button],input[type=submit],button';
const buttons = document.querySelectorAll(selector);

Array.from(buttons).forEach(clickListener);

<input type="button" value="one">
<input type="submit" value="two">
<button type="button">three</button>
<button type="button" value="ignored">four</button>
<button type="submit">five</button>

<div>
  You clicked: <output>nothing yet</output>
</div>

然后是具有相同id属性的多个元素的问题。您不能执行此操作，因为id 必须在每个页面上都是唯一的。这是类别和/或data-*属性发挥作用的地方。

我的示例演示了如何对页面上的每个可能的按钮进行操作，如果您需要定位一组特定的按钮，那么最好使用data-*属性。添加此内容后，您还可以使用它的值代替按钮文本，因为文本发送的内容会随着时间的变化而变化。

function clickHandler(event) {
  const content = event.target.getAttribute('data-act');

	event.preventDefault();
  
  document.querySelector('output').innerHTML = content;
}

function clickListener(button) {
	button.addEventListener('click', clickHandler);
}

const selector = '[data-act]';
const buttons = document.querySelectorAll(selector);

Array.from(buttons).forEach(clickListener);

<button data-act="button-one">ONE</button>
<input type="button" data-act="input-button-two" value="TWO">

<div>
  You clicked <output>nothing yet</output>
</div>

将您所看到的与您采取的行动分开，可能会（节省）您很多时间

如何获取单击按钮的内部文本？

2 个答案: