Question

抱歉这个noob问题，我正在尝试创建一个按钮，只需使用EventListener单击它就可以删除字符串的最后一个字母。截至目前，它不起作用。按钮1和2工作正常。 “清除”按钮也正常工作。这只是取消按钮无法正常工作。我正在尝试使用切片方法。我不确定如何做到这一点，为什么它不起作用。请参阅以下代码以供参考。非常感谢帮助人员。

//PLACE HOLDER FOR THE RESULT
let Result = document.getElementById("result");
Result.innerText = "RESULT HERE";

// CLEAR BUTTON
let clear = document.querySelector('.clear-tasks');
// EVENT LISTENER TO CLEAR THE BUTTON
clear.addEventListener('click', function(e) {
  Result.textContent = 0;
});


//ONE BUTTON  
const numberOne = document.querySelector('.one');

// EVENT LISTENER TO CONCATINATE 1
numberOne.addEventListener('click', runEventOne);

function runEventOne(e) {
  if (Result.textContent === 'RESULT HERE' || Result.textContent === '0') {
    Result.textContent = 1;
  } else {
    Result.textContent += 1;
  }
}


// TWO 
const numberTwo = document.querySelector(".two");

// EVENT LISTENER TO CONCATINATE 2 
numberTwo.addEventListener('click', runEventTwo);

function runEventTwo(e) {
  if (Result.textContent === 'RESULT HERE' || Result.textContent === '0') {
    Result.textContent = 2;
  } else {
    Result.textContent += 2;
  }
}

// CANCEL
const cancel = document.querySelector(".cancel");
cancel.addEventListener('click', function(e) {
  Result.textContent.slice(0, -1);
});

body {
  margin: 0px auto;
  width: 600px;
}

p {
  font-size: 23px;
  float: left;
  padding: 30px;
  border: solid #336336 2px;
  margin: 20px;
}

<h1 id="result"></h1>


<p id="1" class="one">1</p>
<p id="2" class="two">2</p>


<br><br>


<p class="cancel">cancel</p>

<p class="clear-tasks"> CLEAR</p>

Answer 1

代码实际上是正确的，唯一需要的是你需要将slice方法的结果再次设置为Result textContent。

  // CANCEL
const cancel = document.querySelector(".cancel");
    cancel.addEventListener('click',function(e){
    Result.textContent = Result.textContent.slice(0, -1);
});

瞧！

P.S：发表答案而非评论，因为我没有足够的声誉这样做。

Answer 2

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/slice

slice（）方法提取字符串的一部分并将其作为a返回新字符串。

原始字符串未更改。就像其他人说的那样......

Result.textContent = Result.textContent.slice(0, -1);

使用click - javascript删除字符串的最后一个字母

2 个答案: