Question

大家下午好。

我是JavaScript的新手，通常是编码。我想创建一个简单的＆＃34;应用程序在一组文本中来回移动。凭借我的小知识，我可以到这里，但它没有工作。任何帮助将受到高度赞赏。

＆＃13;

document.getElementById("botonatras").addEventListener("click", next);


function next () {
var array = ["text1", "text2", "text3"];
 
var currentText = 0;
var textMax = 3; 
  
  currentText = (currentText + 1) %textMax;
  
  
  document.getElementById("demo").innerHTML = currentText;
  
  
}

＆＃13;

.demo {
  
  height: 200px;
  width:300px; 
  background-color:lightblue; 
  font-family:tahoma; 
  text-align:center; 
  font-size:18px; 
 
}

.boton{
  width:200px; 
  height:50px;
  border:solid;
  border-radius:5px; 
  background-color: rgba(255,90,18,0.5); 
  border-color:red; 
  color:white; 
  
  
}

＆＃13;

<html>
<body>

<p>Aplicacion para realizar lecturas de aplicacion.</p>
<button id="botonatras" class ="boton">Atras</button>
<button id="myBtn" class ="boton">Adelante</button>

  
<p class = "demo" id="demo"></p>



</body>
</html>

＆＃13;

Answer 1

我为你的代码做了三件事：

将currentText = 0和array声明移到next功能的范围之外，并移至全局范围内。
将显示新文本的部分移动到自己的功能
在页面加载window.onload

＆＃13;

document.getElementById("botonatras").addEventListener("click", next);

var currentText = 0;
var array = ["text1", "text2", "text3"];
function display () {
  document.getElementById("demo").innerHTML = array[currentText];
}
function next () {
  var textMax = 3; 
  
  currentText = (currentText + 1) % textMax;
  
  display();
}

window.onload = function () {
  display();
}

＆＃13;

.demo {
  
  height: 200px;
  width:300px; 
  background-color:lightblue; 
  font-family:tahoma; 
  text-align:center; 
  font-size:18px; 
 
}

.boton{
  width:200px; 
  height:50px;
  border:solid;
  border-radius:5px; 
  background-color: rgba(255,90,18,0.5); 
  border-color:red; 
  color:white; 
  
  
}

＆＃13;

<html>
<body>

<p>Aplicacion para realizar lecturas de aplicacion.</p>
<button id="botonatras" class ="boton">Atras</button>
<button id="myBtn" class ="boton">Adelante</button>

  
<p class = "demo" id="demo"></p>



</body>
</html>

＆＃13;

Answer 2

在

以上的级别定义变量currentText

＆＃13;

document.getElementById("botonatras").addEventListener("click", next);
var currentText = 0;

function next () {
var array = ["text1", "text2", "text3"];
 

  var textMax = 3; 
  currentText = (currentText + 1) %textMax;
  
  
  document.getElementById("demo").innerHTML = currentText;
  
  
}

＆＃13;

.demo {
  
  height: 200px;
  width:300px; 
  background-color:lightblue; 
  font-family:tahoma; 
  text-align:center; 
  font-size:18px; 
 
}

.boton{
  width:200px; 
  height:50px;
  border:solid;
  border-radius:5px; 
  background-color: rgba(255,90,18,0.5); 
  border-color:red; 
  color:white; 
  
  
}

＆＃13;

<html>
<body>

<p>Aplicacion para realizar lecturas de aplicacion.</p>
<button id="botonatras" class ="boton">Atras</button>
<button id="myBtn" class ="boton">Adelante</button>

  
<p class = "demo" id="demo"></p>



</body>
</html>

＆＃13;

如何创建一个在JavaScrtipt中来回移动的按钮

2 个答案: