私はonclick関数を使って関数の結果を表示しようとしています。（javascript）

Question

私はまだjavascriptを学んでいますが、どんな助けもありがとう！これは、結果がうまく記録されます

function queue(arr, item) { 
    arr.push(item); 
    var removed = arr.shift(); 
    return removed; 
} 

テストのセットアップ

var testArr = ["roller coaster", "horror tower", "big train", "space maniac"]; 
console.log(queue(testArr)); 

： はここに私のコードです。私はコンソールにすべての結果をループすることもできます

次に私は以下を使用します。

<div id="queue1" class="gray1"> 
    <h3>Available Fast Pass Experience<h3> 
    <input id="button" type="button" value="Click to see your next fast pass     available attraction" style="height:100px; width:380px;font-size:325px";  onclick= "queue(testArr.value = 'onclick= "queue(testArr.value = 'Your next fast  pass experience will be + queue(testArr)')";> 
<div> 
<input id="button2" type="button" value="Available Attraction" style="height:100px; width:380px;font-size:325px;"/> 

私は上記のコードを使用して、私はエラーを得た 私はこのエラーを得た：

は

キャッチされない例外TypeError ：arr.pushがあるのhtmlページ上のボタンで結果を表示しよう関数ではありません

Answer 1

あなたのJavascriptはあなたの例では不正です。すべてのブラウザの読み込みは、二重引用符の間の部分です。

onclick="queue(testArr.value = 'onclick= " 

これ以外の部分は、DOMインタープリタに関する限り、ジャンクです。

queue(testArr.value = 'Your next fast pass experience will be + queue(testArr)') 

あなたは何をしようとしているのですか？配列にアトラクションを1つずつ表示しようとしている場合は、単に配列をループして、現在のインデックスを変数に保存しておくことができます。

HTML：

<div id="queue1" class="gray1"> 
    <h3>Available Fast Pass Experience<h3> 
    <button id="button" type="button" onclick="window.clickButton();">Click to see your next fast pass available attraction</button> 
<div> 
<br> 
<input id="output" placeholder="Available Attraction" /> 

Javascriptを：

var testArr = ["roller coaster", "horror tower", "big train", "space maniac"]; 
var currentAttractionIdx = 0; 

window.clickButton = function() { 
    var output = document.getElementById('output'); 
    output.value = testArr[currentAttractionIdx++]; 
    if (currentAttractionIdx >= testArr.length) currentAttractionIdx = 0; 
} 

https://jsfiddle.net/yk3qug4L/1/