onclickを配列で使用する

Question

私はクラス用の簡単なスクリプトを作成しようとしています。私はonclickイベントと配列を別々に行う方法を理解しましたが、一緒に働かせる方法がわかりません。私はまだリフレッシュ時に運命を変更したいが、ボタンをクリックするオプションがある。

にOnclick：

<button onclick="myFunction()">Get your fortune!</button> 
<p id="fortune"></p> 

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

アレイ：

<script> 
var fortune = new Array(10); 
fortune[0]="May life throw you a pleasant curve."; 
fortune[1]="Procrastination is the thief of time."; 
fortune[2]="Your road to glory will be rocky, but fulfilling."; 
fortune[3]="Patience is your alley at the moment. Don’t worry!"; 
fortune[4]="All things are difficult before they are easy."; 
fortune[5]="If you want the rainbow, you have to tolerate the rain."; 
fortune[6]="Determination is what you need now."; 
fortune[7]="Do not let ambitions overshadow small success."; 
fortune[8]="First think of what you want to do; then do what you have to do."; 
fortune[9]="Hard words break no bones, fine words butter no parsnips."; 

c=Math.round(Math.random()*9); 

document.write(fortune[c]); 
</script> 

Answer 1

このような何か？また、イベントリスナーをaddEventListener関数で追加します。

var fortunes = new Array(10); 
 
fortunes[0]="May life throw you a pleasant curve."; 
 
fortunes[1]="Procrastination is the thief of time."; 
 
fortunes[2]="Your road to glory will be rocky, but fulfilling."; 
 
fortunes[3]="Patience is your alley at the moment. Don’t worry!"; 
 
fortunes[4]="All things are difficult before they are easy."; 
 
fortunes[5]="If you want the rainbow, you have to tolerate the rain."; 
 
fortunes[6]="Determination is what you need now."; 
 
fortunes[7]="Do not let ambitions overshadow small success."; 
 
fortunes[8]="First think of what you want to do; then do what you have to do."; 
 
fortunes[9]="Hard words break no bones, fine words butter no parsnips."; 
 

 
var fortune = document.getElementById("fortune"); 
 
var button = document.getElementById("button"); 
 

 
button.addEventListener('click', function() { 
 
    var c = Math.round(Math.random() * 9); 
 
    fortune.innerHTML = fortunes[c]; 
 
});

<button id="button">Get your fortune!</button> 
 
<p id="fortune"></p>

Answer 2

このコードを試してみてください。

var fortune = new Array(10); 
 
fortune[0]="May life throw you a pleasant curve."; 
 
fortune[1]="Procrastination is the thief of time."; 
 
fortune[2]="Your road to glory will be rocky, but fulfilling."; 
 
fortune[3]="Patience is your alley at the moment. Don’t worry!"; 
 
fortune[4]="All things are difficult before they are easy."; 
 
fortune[5]="If you want the rainbow, you have to tolerate the rain."; 
 
fortune[6]="Determination is what you need now."; 
 
fortune[7]="Do not let ambitions overshadow small success."; 
 
fortune[8]="First think of what you want to do; then do what you have to do."; 
 
fortune[9]="Hard words break no bones, fine words butter no parsnips."; 
 

 
function myFunction() { 
 
    c = Math.round(Math.random()*9); 
 
    //document.write(fortune[c]); 
 
    document.getElementById("fortune").innerHTML = fortune[c] ; 
 
}

<button onclick="myFunction()">Get your fortune!</button> 
 
<p id="fortune"></p>

Answer 3

<script> 
var fortune = [ 
    "May life throw you a pleasant curve.", 
    "Procrastination is the thief of time.", 
    "Your road to glory will be rocky, but fulfilling.", 
    "Patience is your alley at the moment. Don’t worry!", 
    "All things are difficult before they are easy.", 
    "If you want the rainbow, you have to tolerate the rain.", 
    "Determination is what you need now.", 
    "Do not let ambitions overshadow small success.", 
    "First think of what you want to do; then do what you have to do.", 
    "Hard words break no bones, fine words butter no parsnips." 
]; 
function myFunction() { 

    c = Math.round(Math.random()*9); 
    document.getElementById("fortune").innerHTML = fortune[c]; 
} 
</script>