首先，对于长长的摘要感到抱歉。我有一个调用更新函数的函数，并使用+“ px”将它的值应用为字符串，它也会打印成功。我的问题是此函数被调用两次。 （真的很抱歉，如果我的问题陈述不好，我是一个初学者，并尽我所能：/）
var repValue = 0;
var x = 0;
function checkAnswer(one) {
if (one === 1) {
update((repValue += 3) + "px");
console.log("success");
} else { alert("hello"); }
}
更新功能：
function update(repBar) {
document.querySelector(".rep").style.width = repBar;
}
我有我的事件监听器：
function listeners(nextPage) {
document.getElementById("goodAnswer").addEventListener("click", function () {
x = 1;
nextPage();
})
}
当它触发时，我们转到第二页并调用checkAnswer，然后调用update它将打印成功：
function pageTwo() {
checkAnswer(x);
listeners(pageThree);
}
但是当我的EventListener调用pageThree时，它将随后调用checkAnswer，它将打印两次成功。那是我的问题。
function pageThree() {
checkAnswer(x);
}
完整代码的简单版本：
var repValue = 0;
var x = 0;
function checkAnswer(one) {
if (one === 1) {
update((repValue += 3) + "px");
console.log("success");
} else { alert("hello"); }
}
function update(repBar) {
document.querySelector(".rep").style.width = repBar;
}
function listeners(nextPage) {
document.getElementById("goodAnswer").addEventListener("click", function () {
x = 1;
nextPage();
})
}
function init() {
listeners(pageOne);
function pageOne() {
checkAnswer123(x);
listeners(pageTwo);
}
function pageTwo() {
checkAnswer123(x);
listeners(pageThree);
}
}
init();
完整代码：
// Rep Width
var rep = document.querySelector(".rep").style.width = "2px";
repValue = "7px";
var answerOne = document.getElementById("goodAnswer");
var answerTwo = document.getElementById("mildAnswer");
var answerThree = document.getElementById("badAnswer");
var omniBlock = document.querySelector(".textDown");
var bb;
var x;
var y;
var z;
//hide avatars
document.querySelector(".avatar1").style.display = "none";
document.querySelector(".avatar2").style.display = "none";
document.querySelector(".avatar3").style.display = "none";
document.querySelector(".avatar4").style.display = "none";
document.querySelector(".avatar5").style.display = "none";
document.querySelector(".avatar6").style.display = "none";
document.querySelector(".avatar7").style.display = "none";
document.querySelector(".avatar8").style.display = "none";
document.getElementById("goodAnswer").style.borderStyle = "none";
document.getElementById("mildAnswer").style.display = "none";
document.getElementById("badAnswer").style.display = "none";
document.getElementById("mildAnswer").style.borderStyle = "none";
document.getElementById("badAnswer").style.borderStyle = "none";
//Sets textdown as empty at the start of the game
document.querySelector(".textDown").innerHTML = "";
document.querySelector(".textUp").innerHTML = "";
//Sets Good answer text as empty
document.getElementById("goodAnswer").innerHTML = "";
AnswerText = document.getElementById("goodAnswer");
function changeBorderColor(psc) {
var answerColor = document.getElementById("goodAnswer").style.border = psc;
}
var stanleyDefaultText = document.querySelector(".textUp");
var greenBorder = "1px solid green";
var redBorder = "1px solid red";
var orangeBorder = "1px solid orange";
var noBorder = "0px solid white";
//stanley Text
function stanleyText(text, timeout) {
//Types stanley's text
var typewriterStanley = new Typewriter(stanleyDefaultText, {
delay: 1,
cursor: ""
});
setTimeout(function () {
typewriterStanley.typeString(text).start();
}, timeout);
}
//Show Omni possible answers
function omniTextAnswers(answer1, answer2, answer3, timeout) {
setTimeout(
document.getElementById("goodAnswer").innerHTML = answer1,
document.getElementById("mildAnswer").innerHTML = answer2,
document.getElementById("badAnswer").innerHTML = answer3, timeout);
}
function omniText(text, timeout, bordercolor, timeout2) {
//Types omnis text
var typewriterOmni = new Typewriter(omniBlock, {
delay: 12,
cursor: "|"
});
typewriterOmni.typeString(text)
.start();
setTimeout(function () {
document.getElementById(bb).style.border = bordercolor;
}, timeout2);
}
//Event Listeners
function listeners(nextPage) {
document.getElementById("goodAnswer").addEventListener("click", function () {
x = 1;
rightText = answerOne.innerHTML;
bb = "goodAnswer";
nextPage();
})
document.getElementById("mildAnswer").addEventListener("click", function () {
x = 2;
rightText = answerTwo.innerHTML;
bb = "mildAnswer";
nextPage();
})
document.getElementById("badAnswer").addEventListener("click", function () {
x = 3;
rightText = answerThree.innerHTML;
bb = "badAnswer";
nextPage();
})
}
//Update Rep + Answer border + emptys answers
function update(borderstyle, repBar) {
//Set answer color
var answerColor = document.getElementById(bb).style.border = borderstyle;
var rep = document.querySelector(".rep").style.width = repBar;
//Sets answers text to empty
answerOne.innerHTML = "";
answerTwo.innerHTML = "";
answerThree.innerHTML = "";
repValue = repBar;
x = 0;
y = 0;
z = 0;
return repBar;
}
function checkAnswer123(one) {
if (one === 1) {
update("1px solid green", parseInt(repValue, 10) + parseInt("3px", 10) + "px");
} else if (one === 2) {
update("1px solid orange", parseInt(repValue, 10) + parseInt("2px", 10) + "px");
} else if (one === 3) {
update("1px solid red");
} else {
alert("error");
}
}
function checkAnswer213(one) {
if (one === 2) {
update("1px solid green", parseInt(repValue, 10) + parseInt("3px", 10) + "px");
} else if (one === 1) {
update("1px solid orange", parseInt(repValue, 10) + parseInt("2px", 10) + "px");
} else if (one === 3) {
update("1px solid red");
} else {
alert("error");
}
}
function checkAnswer312(one) {
if (one === 3) {
update("1px solid green", parseInt(repValue, 10) + parseInt("3px", 10) + "px");
} else if (one === 1) {
update("1px solid orange", parseInt(repValue, 10) + parseInt("2px", 10) + "px");
} else if (one === 2) {
update("1px solid red");
} else {
alert("error");
}
}
function checkAnswer231(one) {
if (one === 2) {
update("1px solid green", parseInt(repValue, 10) + parseInt("3px", 10) + "px");
} else if (one === 3) {
update("1px solid orange", parseInt(repValue, 10) + parseInt("2px", 10) + "px");
} else if (one === 1) {
update("1px solid red");
} else {
alert("error");
}
}
function checkAnswer132(one) {
if (one === 1) {
update("1px solid green", parseInt(repValue, 10) + parseInt("3px", 10) + "px");
} else if (one === 3) {
update("1px solid orange", parseInt(repValue, 10) + parseInt("2px", 10) + "px");
} else if (one === 2) {
update("1px solid red");
} else {
alert("error");
}
}
function init() {
stanleyText("Omni, things aren't going well here...<br><br> What are your thougths on the situation?");
omniTextAnswers("What is the situation again?", "", "", 1500);
listeners(pageOne);
function pageOne() {
checkAnswer123(x);
omniText("What is the situation again?", null, "0px solid green", 0300);
stanleyText("Reputable members have been posting fake information about you, they say you've been dissing the community and mocking them.<br><br> They are leaving the forums, 300 members just today...", 1200)
omniTextAnswers("What do you suggest Stanley?", "", "", 4500);
listeners(pageTwo);
}
function pageTwo() {
checkAnswer123(x);
omniText("What do you suggest Stanley?", null, "0px solid green", 0300)
stanleyText("I'll be showing you members posts, try your best to earn you reputation by participating!", 1200);
omniTextAnswers("I hate this suggestion already. But let's go, I do care about my community.", "", "", 1200);
listeners(pageThree);
}
function pageThree() {
document.querySelector(".avatar1").style.display = "";
checkAnswer123(x);
omniText("I hate this suggestion already. But let's go, I do care about my community.", null, "0px solid green", 0300)
stanleyText("I've heard some motivational speeches before, and I somewhat still assert them in my life. I've always been a happy go lucky dude regardless, but when times get 10 kinds of damn that's rough, I don't break down like I'm sure tons of people would. Kevin Hart is a pretty inspiring dude, works out everyday etc. He's a pretty strong dude upstairs, and easy to relate to. I can vibe to it, check him out.", 1500);
document.getElementById("mildAnswer").style.display = "";
document.getElementById("badAnswer").style.display = "";
omniTextAnswers("How can he be so small and laugh so loud?", "Kevin Heart does seem like a legit guy.", "I'm banning you for posting about someone I don't care about. Fugg you.", 1200);
listeners(pageFour)
}
function pageFour() {
document.querySelector(".avatarStanley").style.display = "none";
document.querySelector(".avatar1").style.display = "none";
document.querySelector(".avatar2").style.display = "";
checkAnswer213(x);
omniText(rightText, null, "0px solid green", 0300);
stanleyText("Hey guys, Englishman here, after speaking to several Europeans online, I have decided I want to learn a new language. I was thinking of learning French since I already know a little and I like French girls and the culture (not that it's my motivation) but what do you guys recommend to me to use, like I know there are loads of free websites/apps but I'm unsure at which ones are the best. <br><br>Hope HF users are staying safe during this time", 1200);
omniTextAnswers("Know how you say shut up in french? SHUT THE FUCK UP.", "Don't have time for that nonsense.", "Good luck with you learning.")
listeners(pageFive)
}
function pageFive() {
document.querySelector(".avatar2").style.display = "none";
document.querySelector(".avatar3").style.display = "";
checkAnswer123(x);
omniText(rightText, null, "0px solid green", 0300);
stanleyText("Hello, <br><br>I would like to hear about ya'll what you think about the saying \"Money doesn't make happy\". <br>Personally I think it's bullsnap, money does make happy and there isn't a cap on \"how much\" would make me happy. The freedom it offers is sufficient enough to make me live a happy and stress free life.", 1000);
omniTextAnswers("Money is important, but it won't assure you happiness.", "I've got a lot of money and can't complain", "I'm rich and very happy, not like you peasant.")
listeners(pageSix);
}
function pageSix() {
document.querySelector(".avatar3").style.display = "none";
document.querySelector(".avatar4").style.display = "";
checkAnswer123(x);
omniText(rightText, null, "0px solid green", 0300);
stanleyText("I have been working this side hustle since April 7th. My personal finances have been taken care of and I was able to save up $5,000 before the end of the second month of this venture.My goal is to accumulate $10,000 into savings by August 1st. Afterwards I will invest it and treat the fund as a nest egg for my business.", 1000);
omniTextAnswers("5000, in two month? What were you wanking all day?", "Congratulations, make sure to spend it wisely.", "Pfu, I make that in a hour")
listeners(pageSeven);
}
function pageSeven() {
document.querySelector(".avatar4").style.display = "none";
document.querySelector(".avatar5").style.display = "";
checkAnswer213(x);
omniText(rightText, null, "0px solid green", 0300);
stanleyText("Hey guys :) <br><br> Just upgraded to Ub3r! Today is actually my 60th day on HF. Lovin it so far! <br><br>Yall got any tips, tricks, or handy things I should know about now that I've upgraded? <br><br>What do yall like best about Ub3r?", 1000)
omniTextAnswers("If I was still reviewing Uber applications you would have been denied.", "Congrats on Uber, continue doing HQ posts.", "Uber is easy to get now.")
listeners(pageHeight);
}
function pageHeight() {
document.querySelector(".avatar5").style.display = "none";
document.querySelector(".avatar6").style.display = "";
checkAnswer231(x);
omniText(rightText, null, "0px solid green", 0300);
stanleyText("So everyday for the last 150 days straight I've checked in on the daily thread, however today I didn't get any Bytes for my check-in post. <br><br>I've checked the thread and I've posted 4 separate times, and my Bytes history page shows nothing for today's check-in, just my most recent sports wagers.<br><br>Any idea why this would be happening? Not a huge deal as it's only 25 Bytes, I'm more-so posting this so Staff are aware of the issue, not sure if any others have encountered it or not.<br><br>Thanks guys!",1000)
omniTextAnswers("I'll be checking into this, will get back to you.", "What, are you going to cry for 25 bytes?", "I'll fix this one day.")
listeners(pageNine);
}
function pageNine() {
document.querySelector(".avatar6").style.display = "none";
document.querySelector(".avatar7").style.display = "";
checkAnswer132(x);
omniText(rightText, null, "0px solid green", 0300);
stanleyText("I'm sure this has been suggested before although I couldn't find it.<br><br>Upon getting a notification change the pages HTML head title could change to an appended number of notifications in round brackets ().<br><br>For example if I get a notification, the HTML head title in my browser tabs would change from Hack Forums to Hack Forums (1), making me clearly see that I have a notification awaiting.", 1000)
omniTextAnswers("Can't you just click the fugging tab?", "@Xerotic can you look into this?", "We could make a bytes fee to have this function.")
listeners(pageTen);
}
function pageTen() {
document.querySelector(".avatar7").style.display = "none";
document.querySelector(".avatar8").style.display = "";
checkAnswer231(x);
omniText(rightText, null, "0px solid green", 0300);
stanleyText("Any fans of Death Note here? I thought it was a fantastic Anime and very refreshing for me. I really wish they would of made it longer though.", 1000);
omniTextAnswers("I don't really get Anime, seems pointless.", "Anime is for retards.", "I'm not a fan of Anime but I totally get why people may like them.");
listeners(pageEleven);
}
function pageEleven() {
}
}
init();
当您调用listeners(pageOne)时，将注册一个事件监听器功能。
全部注册功能-1
现在单击goodAnswer元素时，它将注册另一个事件侦听器。
全部注册功能-2
现在再次单击goodAnswer时，将执行这两个已注册的功能，-
checkAnswer功能看来您忽略了可以注册任意数量的事件侦听器的事实。单击该元素的次数越多，它将注册更多的侦听器。您将看到越来越多的checkAnswer重复呼叫。
可能您应该先添加removeEventListener函数，然后再添加更多。