如何组合 JavaScript 等属性的两个事件函数？
[英]How can I combine two event functions of properties such as JavaScript?
问题描述
var input = document.querySelector('input'); var button = document.querySelector('button'); var question = document.querySelector('.p1') var result = document.querySelector('.p2') button.addEventListener("click",function(e){ e.preventDefault; question.innerHTML = input.value; input.value = ""; input.placeholder = question.textContent[question.textContent.length-1]+ " finished word?"; input.focus(); }) /* button.addEventListener("click",function(ev){ ev.preventDefault; if(question.textContent[question.textContent.length-1] === input.value[0]) { question.innerHTML = input.value; input.value = ""; result.innerHTML = "good" input.focus(); } else{ input.value = ""; result.innerHTML = "bad" input.focus(); } }) */
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>Document</title> </head> <body> <p class="p1"></p> <input type="text" placeholder="input first word"> <button type="button">submit</button> <p class="p2"></p> <script src="끝말잇기2.js"></script> </body> </html>
I am sorry that I asked you a question using a translator because I can't speak English.
很抱歉，因为我不会说英语，所以我使用翻译器问了你一个问题。
I have a question in the JavaScript code.我在 JavaScript 代码中有一个问题。
First, the first function is input the first word, and the event is click.首先，第一个function是输入第一个字，事件是点击。
The second function is the same as the first letter of the word you received, and the last letter is the same, so you put the first letter in the first letter.第二个function和你收到的单词的第一个字母一样，最后一个字母也一样，所以你把第一个字母放在第一个字母里。
These two functions can be combined, but I think both functions are duplicated because they are event clicks.这两个功能可以组合，但我认为这两个功能是重复的，因为它们是事件点击。
How can i write code that combines two functions and performs sequential functions?如何编写结合两个功能并执行顺序功能的代码？
2 个解决方案
解决方案1
0 2021-02-10 06:18:41
One Function Solution一 Function 解决方案
There is no need for two functions, you can write it as one function.不需要两个函数，可以写成一个function。 Consider here that you don't reset the input.value twice when you combine both.在这里考虑一下，当您将两者结合起来时，您不会重置input.value两次。 Just reset it at the end of the function.只需在 function 的末尾将其重置即可。
var input = document.querySelector('input'); var button = document.querySelector('button'); var question = document.querySelector('.p1') var result = document.querySelector('.p2') button.addEventListener("click", function() { question.innerHTML = input.value; input.placeholder = question.textContent[question.textContent.length - 1] + " finished word?"; input.focus(); if (question.textContent[question.textContent.length - 1] === input.value[0]) { question.innerHTML = input.value; input.value = ""; result.innerHTML = "good" input.focus(); } else { input.value = ""; result.innerHTML = "bad" input.focus(); } })
<html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <p class="p1"></p> <input type="text" placeholder="input first word"> <button type="button">submit</button> <p class="p2"></p> <script src="끝말잇기2.js"></script> </body> </html>
Call Consecutively Wrapper Function连续调用 Wrapper Function
If you want to use two functions you can do a wrapper function and inside it you can call your two other functions.如果你想使用两个函数，你可以做一个包装器 function并在里面你可以调用你的其他两个函数。
Then when the button get's pressed you call the wrapper function which will proceed the two other functions consecutively.然后，当按下按钮时，您调用包装器 function它将连续执行其他两个功能。
var input = document.querySelector('input'); var button = document.querySelector('button'); var question = document.querySelector('.p1') var result = document.querySelector('.p2') button.addEventListener("click", wrapperFunction); function a() { question.innerHTML = input.value; input.placeholder = question.textContent[question.textContent.length - 1] + " finished word?"; input.focus(); } function b() { if (question.textContent[question.textContent.length - 1] === input.value[0]) { question.innerHTML = input.value; input.value = ""; result.innerHTML = "good" input.focus(); } else { input.value = ""; result.innerHTML = "bad" input.focus(); } } function wrapperFunction() { a(); b(); }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>Document</title> </head> <body> <p class="p1"></p> <input type="text" placeholder="input first word"> <button type="button">submit</button> <p class="p2"></p> <script src="끝말잇기2.js"></script> </body> </html>
解决方案2
0 2021-02-13 17:16:55
I removed the preventDefault , then I added a setTimeout to changing input.value so both functions can run(with the input.value resource shared)我删除了preventDefault ，然后我添加了一个setTimeout来更改input.value以便两个函数都可以运行（共享 input.value 资源）
Because setTimeout is asynchronous , it would work well in situations like this, since it would wait until the other things finish running(I'm paraphrasing so don't quote me) then it will run.. making both functions work at the "same time"因为setTimeout是asynchronous的，所以在这种情况下它会很好地工作，因为它会等到其他事情完成运行（我在解释，所以不要引用我的话）然后它会运行.. 使两个函数在“相同时间”
var input = document.querySelector('input'); var button = document.querySelector('button'); var question = document.querySelector('.p1') var result = document.querySelector('.p2') button.addEventListener("click",function(e){ //e.preventDefault; question.innerHTML = input.value; setTimeout(()=>{input.value = "";},0) input.placeholder = question.textContent[question.textContent.length-1]+ " finished word?"; input.focus(); }) button.addEventListener("click",function(ev){ //ev.preventDefault; if(question.textContent[question.textContent.length-1] === input.value[0]) { question.innerHTML = input.value; setTimeout(()=>{input.value = "";},0) result.innerHTML = "good" input.focus(); } else{ setTimeout(()=>{input.value = "";},0) result.innerHTML = "bad" input.focus(); } })
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>Document</title> </head> <body> <p class="p1"></p> <input type="text" placeholder="input first word"> <button type="button">submit</button> <p class="p2"></p> <script src="끝말잇기2.js"></script> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.