时间戳

首页 > 解决方案 > 当按下其中一个按钮并且一个或所有输入为空时，如何显示消息？

javascript - 当按下其中一个按钮并且一个或所有输入为空时，如何显示消息？

问题描述

我想知道你是否可以帮我解决这个问题。我想向按下按钮而不在按下按钮之前填写字段的用户显示一条消息。这是代码：

这是代码： https ://jsfiddle.net/santimorelle23/1L420v87/2/

<body>
<div id="contLayout">
    <h1 id="header">Calculator</h1>
    <div id="contInputs">
        <input type="number" required id="num1" class="inputs">
        <input type="number" id="num2" class="inputs">
    </div>
    <div id="contButtons">
        <p>Operators - Tools</p>
        <button class="operatorIcon" id="+">+</button>
        <button class="operatorIcon" id="-">-</button>
        <button class="operatorIcon" id="x">x</button>
        <button class="operatorIcon" id="/">/</button>
        <button class="operatorIcon" id="C">C</button>
    </div> 
</div>
<script type="text/javascript" src="/Calculator/js/functions.js"></script>

标签： javascript

解决方案

如果我理解正确，这些代码将有所帮助。

Javascript：

const allButtons = document.querySelectorAll(".operatorIcon");
        allButtons.forEach(button => {
            button.addEventListener("click", function() {
               alert(`you press ${this.id}`)
            })
        });

更新 ：

Javascript：

let input1 = document.getElementById("num1");
let input2 = document.getElementById("num2");

function isInputsEmpty() {
    if (input1.value === "" || input2.value === "") {
        alert("input is empty")
    }
}

const allButtons = document.querySelectorAll(".operatorIcon");
allButtons.forEach(button => {
    button.addEventListener("click", function() {
        isInputsEmpty();
    })
});

推荐阅读