javascript - Javascript 单击按钮时更改文本

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”一词变为“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;
}

小提琴

Answer 2

试试这个例子：

http://jsfiddle.net/6udus/

我认为它不会比这更简单:)

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

Answer 3

把它放到脚本标签中

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

我知道另一个答案也有效，但这更短更简单。

Answer 4

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

例如：

第一种方式：[使用计数器变量]

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

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

第二种方式：[withOut 一个计数器变量]

// Note : Array elements in reverse order

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

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