如何使用JavaScript更改单击时的文本

How to change text onclick using JavaScript?

本文关键字：文本 单击 何使用 JavaScript      更新时间：2024-01-01

有多行类似

名称 状态

a nbsp nbsp nbsp nbsp 是（超链接）
b nbsp nbsp nbsp nbsp 否（超链接）
c nbsp nbsp nbsp nbsp 是（超链接）

我的代码是：

function change_text() {
  var button = document.getElementById('toggle_button');
  if (button.innerHTML === "YES") {
      button.innerHTML = "NO";
  }
  else {
      button.innerHTML = "YES";
  }
}


<a href='javascript: toggle()'><p id="toggle_button" onclick="change_text()">YES</p></a>
 <a href='javascript: toggle()'><p id="toggle_button" onclick="change_text()">NO</p></a> 
<a href='javascript: toggle()'><p id="toggle_button" onclick="change_text()">YES</p></a>

点击第一行发生的事情，只需提供一些解决方案。我是javascript或stackoverflow的新手。如果有任何问题，请发表评论。

以下可能是我的操作方法

jsbin.com演示

// define Toggler "class"
var Toggle = function(elem) {
  elem.addEventListener("click", onClick);
  function onClick(event) {
    toggleText();
    event.preventDefault(); 
  }
  function toggleText() {
    var text = elem.innerHTML;
    elem.innerHTML = (text === "YES") ? "NO" : "YES"; 
  }
  this.toggle = toggleText;
};
// initialize
var toggles = document.getElementsByClassName("toggle");
for (var i=0, len=toggles.length; i<len; i++) {
  new Toggle(toggles[i]);
}

这将不引人注目地附加到具有类toggle 的HTML元素

<a href="#toggle" class="toggle">YES</a>
<a href="#toggle" class="toggle">NO</a>
<a href="#toggle" class="toggle">YES</a>

作为一个额外的便利，这个Toggle"类"提供了一个API，您可以通过编程与切换进行交互

<a href="#toggle" id="foo">YES</a>

// API example
var elem = document.getElementById("foo");
var fooToggle = new Toggler(elem);
// toggle off
fooToggle.toggle();
// <a href="#toggle" id="foo">NO</a>
// toggle on again
fooToggle.toggle();
// <a href="#toggle" id="foo">YES</a>

现在，由于这不会更改inputs或任何内容，您可能希望在a元素上使用data-value="YES"或data-value="NO"。然后，当您提交页面时，您可以收集这些数据，将其转换为JSON，然后提交进行处理。

id总是唯一的。您不能使用多个时间相同的id。请区分id并尝试。

<script>
function change_text(obj) {
   if (obj.innerHTML === "YES") {
       obj.innerHTML = "NO";
   }
   else {
      obj.innerHTML = "YES";
   }
  }
</script>
 <a href='javascript: void(0);' onclick="change_text(this)">YES</a>
 <a href='javascript: void(0);' onclick="change_text(this)">NO</a> 
 <a href='javascript: void(0);' onclick="change_text(this)">YES</a>

页面上的元素不能有相同的id。这里，的所有三个元素都有相同的IDid="toggle_button"

试试这个

HTML

<a href='javascript: void(0);' onclick="change_text(this)">YES</a>
 <a href='javascript: void(0);' onclick="change_text(this)">NO</a> 
 <a href='javascript: void(0);' onclick="change_text(this)">YES</a>

这是Javascript

function change_text(btn) {
        if (btn.innerHTML === "YES") {
            btn.innerHTML = "NO";
        }
        else {
            btn.innerHTML = "YES";
        }
    }

正在工作的FIDDLE链接。

请检查以下答案

function changeText(idElement) {
var element = document.getElementById('element' + idElement);
if (idElement === 1 || idElement === 2) {
    if (element.innerHTML === 'Read More...') element.innerHTML = 'Close';
    else {
        element.innerHTML = 'Read More...';
    }
}
}

现场演示http://jsfiddle.net/UfVAH/

使用this关键字获取javascript中的当前元素对象。

试试这个：

HTML:

<a href='javascript:void(0)'><p class="toggle_button" onclick="change_text(this)">YES</p></a>
<a href='javascript:void(0)'><p class="toggle_button" onclick="change_text(this)">NO</p></a> 
<a href='javascript:void(0)'><p class="toggle_button" onclick="change_text(this)">YES</p></a>

Javascript：

function change_text(Object) {
        if (Object.innerHTML === "YES") {
            Object.innerHTML = "NO";
        }
        else {
            Object.innerHTML = "YES";
        }
    }

在jsfiddle 中试用

相关文章：