I'm试图使用onclick函数显示函数的结果.(javascript)

I'm trying to display the result of a function using the onclick function.(javascript)

本文关键字:函数 显示 结果 javascript onclick      更新时间:2023-09-26

我仍在学习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;"/>

我使用了上面的代码,但出现了错误我得到了这个错误:

未捕获类型错误:arr.push不是函数

您的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/