JavaScrtiptで前後に移動するボタンを作成する方法

皆さん、こんにちは。JavaScrtiptで前後に移動するボタンを作成する方法

私はJavaScriptの初心者ですが、一般的にはコーディングしています。私はテキストのグループで前後に移動する "シンプルな"アプリを作成したい。私の小さな知識で、私はここに行くことができたが、うまくいかなかった。どんな助けも高く評価されます。

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; 
 
    
 
    
 
}

.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; 
 
    
 
    
 
}

<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>

出典

2017-01-21 user3687788

とページがロード

独自の機能に新しいテキストを表示する部分が表示機能と呼ばれる移動変数は再び作成され、currentTextは常にゼロになります。 – Smiranin

変数currentTextを上記のレベルで定義します。 – Smiranin

myBTnのクリックリスナーを定義していないのはなぜですか？ – Blauharley

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; 
 
    
 
    
 
}

.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; 
 
    
 
    
 
}

<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>

出典

2017-01-21 19:24:44 Smiranin

以上のレベルで変数を定義しcurrentText私はあなたのコードに3つのことをやった：

がcurrentText = 0に移動し、nextの外にあり、グローバルスコープ外にあるarrayという宣言があります。
たときに次の（）内の各呼び出し機能付window.onload

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(); 
 
}

.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; 
 
    
 
    
 
}

<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>

出典

2017-01-21 19:28:25 John

要素を追加または削除する場合に備えて、 'textMax'の値を' 3'ではなく 'array.length'に変更することもできます。 – John

JavaScrtiptで前後に移動するボタンを作成する方法

答えて

関連する問題