Question

我正在尝试编写一个单击函数，如果某个条件为真，则每次单击该按钮时它将覆盖当前字符串并将其替换为新的字符串字符。

我在下面创建了一个简单的例子来说明我想要实现的目标。

＆＃13;

$(document).ready(function() {
  const hello = document.getElementById("hi");
  const button =
    document.getElementById("replace");
  let clicked = false;

  let goodBye = function() {
    clicked = true;
    if (hello.innerHTML.length < 9) {
      if (clicked) {
        // I want to clear the current HTML first, then I went the new HTML to add a single 9 every time the button is clicked.    
        hello.innerHTML += "9";
      }
    }
  }
  button.addEventListener("click", goodBye);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 id="hi">01234567</h1>
<button id="replace">click me</button>

＆＃13;

虽然我确信这很简单，但我仍然处于使用JS的相对较新的状态，而且我一直试图解决这个问题超过一周。任何帮助表示赞赏。

Answer 1

我删除了你的jQuery，因为它不需要。我相信这就是你要找的东西。

步骤：

获取对您的元素的引用（hello和button）
将事件监听器绑定到按钮
点击按钮后，获取hello元素的当前值
运行逻辑（if statement）并执行您需要的操作。

https://jsfiddle.net/3ho2by8t/14/

(() => {
  const hello = document.getElementById("hi");
  const button = document.getElementById("replace");
 	
  button.addEventListener('click', (evt) => { 
  	const helloText = hello.innerHTML;
  	if (helloText.length > 9) {
    	hello.innerHTML = '9';
    } else {
    	hello.innerHTML += helloText.length;
    }
  });
  
})();

<h1 id="hi">01234567</h1>
<button id="replace">click me</button>

使用点击事件重新编写字符串

1 个答案: