Question

您好我想在单击按钮时更改div内的文本。

<div>
    <p id="part1">Hello</p>

    <button type="button" onclick="myFunction()">Next</button>
</div>



<script>
function myFunction() {
document.getElementById("part1").innerHTML="WORLD";
}
</script>

这完美无缺。我有一个div，里面有一个文本和一个按钮，在这种情况下它有一个单词“Hello”。使用我点击按钮时的代码，单词“hello”变为单词“WORLD”。我想做一个类似于序列的东西，将单词从“hello”改为“world”，从“world”改为“welcome”，从“welcome”改为“my program”（示例）。以及多次单击按钮的所有内容。

Answer 1

如果您正在寻找此text change cycle，请尝试以下方法： -

var textArray=['World', 'My', 'Welcome', 'Something','Hello']
function myFunction() {
    var value = textArray.shift(); //Get the first item from the array
    textArray.push(value); //Push it back for the cycle to repeat.
    document.getElementById("part1").innerHTML=value;
}

Fiddle

Answer 2

将其放入脚本标记

var curNum=0;
var arrOfDialogs=['hello','welcome to my program','goodbye']
function myFunciton(){
    if(curNum<arrOfDialogs.length)
        document.getElementById('part1').innerHTML=arrOfDialogs[curNum++];
}

我理解其他答案也有效，但这更短更简单。

Answer 3

您可以使用名称创建数组。

例如：

第一种方式：[带有计数器变量]

var namesArr = new Array('hello','world','welcome','welcome to my program');
var counter=0;

document.getElementById("part1").innerHTML=namesArr[counter];
counter++;

第二种方式：[withOut a counter variable]

// Note : Array elements in reverse order

var var namesArr = new Array('welcome to my program','welcome','world','hello');

document.getElementById("part1").innerHTML=namesArr.pop();

Answer 4

试试这个例子：

http://jsfiddle.net/6udus/

我认为它不会比这更简单：）

var textArray=['World', 'My', 'Welcome', 'Something','Hello']
var i=0;
function myFunction() {
  document.getElementById("part1").innerHTML = 
    textArray[i++ % textArray.length]  ;
}

Javascript单击按钮时更改文本

4 个答案:

Fiddle