时间戳

首页 > 解决方案 > 如何组合 JavaScript 等属性的两个事件函数？

javascript - 如何组合 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 代码中有一个问题。

首先，第一个函数是输入第一个单词，事件是点击。

第二个功能和你收到的单词的第一个字母一样，最后一个字母也一样，所以你把第一个字母放在第一个字母里。

这两个功能可以组合，但我认为这两个功能是重复的，因为它们是事件点击。

如何编写结合两个功能并执行顺序功能的代码？

标签： javascript

解决方案

我删除了preventDefault，然后我添加了一个setTimeoutto 更改input.value，以便两个函数都可以运行（与 input.value 资源共享）

因为setTimeoutis 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>

推荐阅读