通过单击按钮的次数更改按钮的文本

Question

为了进行实践测试，我被要求找到一种方法来使按钮显示段落中的文本。 每次按下时，文本都必须更改。

第一次按下该按钮应该说“您按下了按钮”，第二次则是“第三次到第五次再次按下了它”（按3到5）（第六次），第六次以后应该说“停止！ “

编辑编辑

这是完整的原始HTML，我不确定是否需要，但是html可能与大家都给我的javascript代码有关，对我不起作用。

HTML

<!DOCTYPE html>
<html>
<head>
<script src="q2.js" type="text/javascript"></script>
</head>
<body>

<button type="button" onclick="go()">ClickMe</button>

<p id="output">
</p>

</body>
</html>

JavaScript的

function go() {
    var out = document.getElementById("output");
    var x = "hi there";
    out.innerHTML = x;
}

我应该怎么做才能使这项工作？

Answer 1

使用switch语句来避免嵌套if语句...

var testCount = 0;
var out = document.getElementById("output");

function go(){
  testCount++;
  switch (testCount) {
    case 1:
      out.innerHTML = 'you pressed the button';
      break;

    case 2:
      out.innerHTML = 'you pressed it again';
      break;

    case 3:
    case 4:
    case 5:
      out.innerHTML = 'you pressed the button ' + testCount + ' times';
      break;

    default:
      out.innerHTML = 'stop!!';
      break;
  }
}

Answer 2

还是这个呢？

'use strict';

let count = 0;

// define this outside of function so it won't be defined over and over
let out = document.getElementById('output');

let message;

function go(e){
    e.preventDefault();
    count ++;
    out.innerHTML = count > 1 ? count === 2 ? 'You pressed the button again!' : count > 1 && count < 6 ? `You pressed the button ${count} times!` : 'Stop!' : 'You pressed the button';
}

// It's best practice to stay away from inline JS, you could define your click handler in your script block
// For the following to work add id="btn1" to your button and remove the onclick handler

document.getElementById('btn1').addEventListener('click', go);

Answer 3

您可以这样做：

'use strict';

let count = 0;

// define this outside of function so it won't be defined over and over
let out = document.getElementById('output');

let message;

function go(e){
    e.preventDefault();
    count ++;
    if(count === 1) message = 'You pressed the button!';
    if(count === 2) message = 'You pressed the button again';
    if(count > 1 && count < 6) message = `You pressed the button ${count} times!`;
    if(count >= 6) message = 'Stop!';
    out.innerHTML = message;
}

// It's best practice to stay away from inline JS, you could define your click handler in your script block
// For the following to work add id="btn1" to your button and remove the onclick handler

document.getElementById('btn1').addEventListener('click', go);

通过单击按钮的次数更改按钮的文本

问题描述

3 个解决方案

解决方案1
2 2015-10-12 22:43:52

解决方案2
0 2015-10-13 00:07:29

解决方案3
-2 2015-10-12 22:42:38

通过单击按钮的次数更改按钮的文本

问题描述

3 个解决方案

解决方案1 2 2015-10-12 22:43:52

解决方案2 0 2015-10-13 00:07:29

解决方案3 -2 2015-10-12 22:42:38

解决方案1
2 2015-10-12 22:43:52

解决方案2
0 2015-10-13 00:07:29

解决方案3
-2 2015-10-12 22:42:38