我想点击一个按钮

问题描述：

我在很长一段时间，现在一直在试图找出我怎么能阻止我的代码打印相同的报价两次从显示两次相同的对象停止我的功能。我想点击一个按钮

此外，当数组中的每个对象都被打印出来时，我想让它以某种方式重置。这样，一旦你完成了所有的引用，你就可以浏览引号。

这是我的代码的主要部分：

document.getElementById('loadQuote').addEventListener("click", printQuote, false);

的printQuote函数只是其中包含的从我的阵列访问信息的信息：

var randomObjectNumber = getRandomQuote(); 

var html = "<p class='quote'>" 
     + quotes[randomObjectNumber].quote + 
     "</p>"; 

document.getElementById('quote-box').innerHTML = html;

一个随机对象被显示每次点击eventListener时：

function getRandomQuote() { 

var randomObjectNumber = Math.floor(Math.random() * quotes.length); 

return randomObjectNumber; 
}

我对如何做到这一点有一些想法，我试过但没有成功。我试着给每个对象一个布尔属性，但我似乎无法真正地为每个属性分配一个布尔值，而不会搞乱printQuote函数。

我也尝试将对象显示给不同的数组，但同样的问题发生在那里。

我觉得我周围的eventListener有一些概念，我不完全理解，因为每次我尝试操纵一个显示的对象时，我最终都会改变每一个对象。

这正是数组中的一个典型的物体看起来像的方式：

{quote : "Darkness is merely the absence of light"}

（我也已经分配给对象的其他属性，但我觉得提出这些是多余的）

如果有人能解释，或给我一个提示，关于如何解决这个问题，我一直在努力一段时间。

一些提示将不胜感激！

祝您有愉快的一天。

塞巴斯蒂安。

编辑：所有代码：https://jsfiddle.net/fusqb7hz/

我们需要看到的代码，你可以创建一个的jsfiddle（https://jsfiddle.net/）？ addEventListener中还有多少次你的代码？ – multimediaxp

https://jsfiddle.net/fusqb7hz/ –

是这样的吗？ https://jsfiddle.net/fusqb7hz/1/ – dtkaias

答

基本上你需要什么：

创建一个单独的阵列会存储您已经使用的所有报价。
从初始数组中删除引号。
检查您是否仍在初始数组中有引号，如果没有，则从备份数组中取回它们。

这里是更新的js小提琴为你=> https://jsfiddle.net/fusqb7hz/2/ – encore

DUDE你只是回答了这么多问题，已经在过去的48小时中纠缠我。非常感谢你。 –

答

的问题是，你调用addEventListener两次：

//Let's developers create multiple eventListeners without being redundant. 
function onClicking (printFunction) { 
document.getElementById('loadQuote').addEventListener("click", printFunction, false); 
} 
onClicking(printColor); 
onClicking(printQuote);

致电onClicking两次你做的点击发生两次，所以的addEventListener增加两倍，这意味着点击算作两个。

更改上面的代码如下：

//Let's developers create multiple eventListeners without being redundant. 
document.getElementById('loadQuote').addEventListener("click", function(){ 
    printColor(); 
    printQuote(); 
});

这里是的jsfiddle：

https://jsfiddle.net/fusqb7hz/3/

非常感谢！非常感激。你碰巧有任何建议或提示如何解决其他问题？ –

答

我认为最简单的方法是洗牌你的报价数组，然后通过他们一个接一个。这给你下一个“随机”，但看不见的报价。我不喜欢的唯一部分是这个洗牌机（Fisher Yates的一个推导）修改了原始的报价数组。不过你可能不在乎。

// -------------------------------- 
 
// A bunch of quotes 
 
// -------------------------------- 
 
var quotes = []; 
 
quotes.push({quote : "Darkness is merely the absence of light"}); 
 
quotes.push({quote : "quote 2"}); 
 
quotes.push({quote : "quote 3"}); 
 
quotes.push({quote : "quote 4"}); 
 
quotes.push({quote : "quote 5"}); 
 
// -------------------------------- 
 

 
// -------------------------------- 
 
// Your favorite array shuffle utility 
 
// -------------------------------- 
 
var shuffle = function(array) { 
 
    for (var i = array.length - 1; i > 0; i--) { 
 
    var j = Math.floor(Math.random() * (i + 1)); 
 
    var temp = array[i]; 
 
    array[i] = array[j]; 
 
    array[j] = temp; 
 
    } 
 
    return array; 
 
}; 
 
// -------------------------------- 
 

 
// -------------------------------- 
 
// construct a function to get a random unseen quote until 
 
// all quotes have been seen. Then reset... 
 
// -------------------------------- 
 
var getQuote = (function(quotes, shuffle){ 
 
    var current = 0; 
 

 
    var get = function(){ 
 
    if (!quotes || !quotes.length) { return ""; } 
 
    if (current >= quotes.length){ current = 0; } 
 
    if (current === 0){ 
 
     console.log("randomizing quotes..."); 
 
     shuffle(quotes); 
 
    } 
 
    return quotes[current++].quote; 
 
    }; 
 

 
    return get; 
 
})(quotes, shuffle); 
 
// -------------------------------- 
 

 
var printQuote = function(){ 
 
    document.getElementById('quote').innerText = getQuote(); 
 
}; 
 

 
document.getElementById('loadQuote').addEventListener("click", printQuote, false);

<div id="quote"></div> 
 
<button id="loadQuote">get quote</button>

我想点击一个按钮

相关推荐