Question

JS：

var textVal = 0;
function clickMe() {
    if (var textVal == 0) {
        document.getElementById('txt').innerHTML = "TO";
        textVal += 1;
    };
    else if (var textVal == 1) {
        document.getElementById('txt').innerHTML += " INFINITY";
        textVal += 1;
    };
    else if (var textVal == 2) {
        document.getElementById('txt').innerHTML += " AND";
        textVal += 1;
    };
    else if (var textVal == 3) {
        document.getElementById('txt').innerHTML += " BEYOND";
        textVal += 1;
    };
    else {
    document.getElementById('txt').innerHTML = "";
        textVal = 0;
    };
};

HTML：

<h1 id="txt"></h1>
<button onclick="clickMe()">CLICK ME</button>

<小时/> 我希望有一个按钮添加文本取决于已经存在的文本。我试图使用变量这样做。我的逻辑是，如果没有文本，变量为零，所以它添加第一个单词，然后变量将被提高一个，以便下次单击该按钮时，它将使用下一个值，依此类推直到它已满，然后它将清空文本并将其设置为0以便重复。我不确定自己做错了什么，好像应该有用。任何帮助/提示？

Answer 1

除了一些语法问题之外，您的一般方法都可行，但您可以大大简化。

// Get an array of words by splitting a sentence on spaces.
var words = ('TO INFINITY AND BEYOND').split(' ');

// Counter of the current word
var currentWord = -1;

// Define our click handler
function clickMe() {

  // Add one to the current word index
  currentWord++;

  // If we have gone beyond the number of words we have, reset
  if (currentWord >= words.length) {
    currentWord = 0;
    document.getElementById('txt').innerHTML = '';
  }

  // Display the word
  document.getElementById('txt').innerHTML += words[currentWord];
}

我还应该注意，由于您要设置HTML，因此您需要确保放入HTML中的任何内容都能正确转义为HTML。 &变为&，>变为〜＆gt;`等。如果您设置文字属性，则会自动为您完成此操作。

Answer 2

你的JS应该是这样的：

var textVal = 0;
function clickMe() {
    if (textVal == 0) {
        document.getElementById('txt').innerHTML = "TO";
        textVal ++;
    }
    else if (textVal == 1) {
       document.getElementById('txt').innerHTML += " INFINITY";
       textVal += 1;
    }
    else if (textVal == 2) {
        document.getElementById('txt').innerHTML += " AND";
        textVal += 1;
    }
    else if (textVal == 3) {
        document.getElementById('txt').innerHTML += " BEYOND";
        textVal += 1;
    }
    else {
        document.getElementById('txt').innerHTML = "";
        textVal = 0;
    }
};

这是工作，我建议你阅读Clean code: A Handbook of Agile Software Craftsmanship

Answer 3

html代码

<!DOCTYPE html>
<html>
<head>
  <script src="app2.js"></script>
</head>
<body>
  <h1>  hello  </h1>
  <h1 id="txt"></h1>
  <button onclick="clickMe()">CLICK ME</button>
</body>
</html>

js代码

var textVal = 0;
function clickMe() {
    if (textVal == 0) {
        document.getElementById('txt').innerHTML = "TO";
        textVal += 1;
    }
    else if (textVal == 1) {
        document.getElementById('txt').innerHTML += " INFINITY";
        textVal += 1;
    }
    else if (textVal == 2) {
        document.getElementById('txt').innerHTML += " AND";
        textVal += 1;
    }
    else if (textVal == 3) {
        document.getElementById('txt').innerHTML += " BEYOND";
        textVal += 1;
    }
    else {
    document.getElementById('txt').innerHTML = "";
        textVal = 0;
    }
}

根据使用变量已存在的文本添加文本？

3 个答案: