Я пытаюсь показать результат функции, используя функцию 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)); 

Это регистрирует результаты просто отлично. Я могу даже соединить все результаты с консолью

Затем я использую следующее. пытаясь вывести результат в кнопку на HTML странице:

<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;"/> 

Я использовал код, указанный выше, и я получил ошибки я получил эту ошибку:

Uncaught TypeError: arr.push является не функция

Answer 1

Ваш Javascript неверен в вашем примере. Все просмотры браузера - это часть между двойными кавычками.

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

Остальная часть этого товара является мусором, если речь идет о интерпретаторе DOM.

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

Вы должны указать в своем вопросе, что вы пытаетесь сделать. Если вы пытаетесь отобразить достопримечательности по одному в массиве, вы можете просто перебрать массив и сохранить текущий индекс в переменной.

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/