如何組合 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>
很抱歉，因為我不會說英語，所以我使用翻譯器問了你一個問題。
我在 JavaScript 代碼中有一個問題。
首先，第一個function是輸入第一個字，事件是點擊。
第二個function和你收到的單詞的第一個字母一樣，最后一個字母也一樣，所以你把第一個字母放在第一個字母里。
這兩個功能可以組合，但我認為這兩個功能是重復的，因為它們是事件點擊。
如何編寫結合兩個功能並執行順序功能的代碼？
2 個解決方案
解決方案1
0 2021-02-10 06:18:41
一 Function 解決方案
不需要兩個函數，可以寫成一個function。 在這里考慮一下，當您將兩者結合起來時，您不會重置input.value兩次。 只需在 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>
連續調用 Wrapper Function
如果你想使用兩個函數，你可以做一個包裝器 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", 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
我刪除了preventDefault ，然后我添加了一個setTimeout來更改input.value以便兩個函數都可以運行（共享 input.value 資源）
因為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>
如何在 JavaScript 中組合兩個不同的函數來顯示零（0）和 n 之間的 2 的倍數？
[英]How can I combine two different functions in JavaScript to display the multiples of 2 between zero(0) and n?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.