배열로 onclick 작업하기

Question

클래스 용 간단한 스크립트를 만들려고합니다. 나는 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>