javascript - 内联 Javascript 到不显眼的 JavaScript？

Question

如何将此内联 javascript 更改为 Unobtrusive JavaScript？

<input type="button" value="Text1" onclick="this.value=this.value=='Text1'?'Text2':'Text1';">

谢谢！

---

谢谢你的回答，但它不起作用。我的代码是：

php

<input id=\"button1\" type=\"button\" value=\"Text1\">

js文件

document.getElementById('button1').onclick = function(){
    this.value = this.value === 'Text1' ? 'Text2' : 'Text1';
}

或者

document.getElementById('button1').addEventListener('click', function () {
    this.value = (this.value === 'Text1') ? 'Text2': 'Text1';
}, false);

我尝试了你告诉我的一切，但没有奏效！没有jQuery。

我忘记了什么吗？

Answer 1

在输入中添加一个 id 并执行以下操作：

document.getElementById('somebutton').addEventListener('click', function () {
    this.value = (this.value === 'Text1') ? 'Text2': 'Text1';
}, false);

或使用 jQuery

$('#somebutton').on('click', function () {
    this.value = (this.value === 'Text1') ? 'Text2': 'Text1';
});

Answer 2

<input type="button" value="Text1" />
<script>
  (function(){
    var inputs = document.getElementsByTagName('input');
    return inputs[inputs.length - 1];
  })() // returns the input element
  .onclick = function(){
    this.value = this.value === 'Text1' ? 'Text2' : 'Text1';
  }
</script>

该脚本必须立即放置在元素之后（或至少input在页面上的下一个元素之前的某个位置）。

演示

如果您可以将一个添加id到您的元素中，那么脚本会变得更简单一些，您可以将它放在input存在之后的任何位置（例如在结束</body>标记之前：

<input id="somename" type="button" value="Text1" />

脚本：

<script>
  document.getElementById('somename').onclick = function(){
    this.value = this.value === 'Text1' ? 'Text2' : 'Text1';
  }
</script>

演示