javascript 使用eventlistener禁用和启用按钮

3phpmpom  于 2023-01-24  发布在  Java
关注(0)|答案(2)|浏览(149)

我有一个有六个字段的国际象棋表单。两个是下拉菜单，用于选择名字（whiteplayername和blackplayername），其他四个可用于添加自定义名称（名白、姓白、名黑、姓黑）。当前，如果从下拉菜单中选择了名称，我希望JavaScript禁用自定义字段（这是工作）。我还希望提交按钮被禁用，如果既没有whiteplayername或firstnamewhite和blackplayername的firstnameblack被选中。目前，提交人-如果从blackplayername和whiteplayname菜单中选择了一个名称，则按钮将被启用，但如果选择了一个空字段，则不会再次禁用在任何一个。

    • 编辑**

完整的html在下面，虽然我已经从表中取出了一个部分，只是由文本和行组成，以减少使用的空间。

<!DOCTYPE html>
    <html lang="en"
      xmlns:th="http://www.thymeleaf.org">
    <head>
    <meta charset="UTF-8">
    <title>chessopenings3</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <style>
        body {
            style: "background-color: #FF0000;
        }

        .topnav {
            position: relative;
            overflow: hidden;
            background-color: #333;
            border: 2px;
            width: max-content;
        }

        .topnav a {
            float: left;
            color: #f2f2f2;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
            font-size: 17px;
            border: 2px;
        }

        .topnav a:hover {
            background-color: #ddd;
            color: black;
            border: 2px;
        }

        .formformat {
            color: white;
            padding: 50px;
            font-size: 24px;
            font-family: Arial, Helvetica, sans-serif;
        }

        .instructions-text {
            position: absolute;
            color: white;
            align: center;
            left: 750px;
            top: 150px;
            font-family: Arial, Helvetica, sans-serif;
            font-size: 20px;
        }

        .warning {
            position: absolute;
            color: white;
            text-align: left;
            left: 150px;
            top: 50px;
            font-family: Arial, Helvetica, sans-serif;
            font-size: 20px;
        }

        select {
            width: 120px;
        }

        select:focus {
            min-width: 120px;
            width: auto;
        }

        @media screen and (max-width: 500px) {
            .navbar a {
                float: none;
                display: block;
            }
        }
    </style>
    <script>
        document.addEventListener("DOMContentLoaded", function () {
            let isformvalid = false;
            document.getElementById("submit-button").disabled = !isformvalid;
    document.getElementById("whiteplayername").addEventListener("change", function () {
     
                let blackplayername = 
    document.getElementById("blackplayername");
                let firstnameblack = 
    document.getElementById("firstnameblack");
                let firstnamewhite = 
    document.getElementById("firstnamewhite");
                let lastnamewhite = 
    document.getElementById("lastnamewhite");
                let lastnameblack = 
    document.getElementById("lastnameblack");
                
    disablewhenmandatorynamemissingwhitename(this.value, blackplayername, firstnameblack, firstnamewhite, lastnameblack, lastnamewhite);
                isformvalid = checkeitherfirstorfullnamepopulated (this.value, firstnamewhite, blackplayername, firstnameblack, isformvalid);
                document.getElementById("submit-button").disabled = !isformvalid;
            });
        });

        function disablewhenmandatorynamemissingwhitename(whiteplayername, blackplayername, firstnameblack, firstnamewhite, lastnameblack, lastnamewhite) {
            if (whiteplayername !== "") {
                firstnamewhite.disabled = true;
                lastnamewhite.disabled = true;
            } else {
                firstnamewhite.disabled = false;
                lastnamewhite.disabled = false;
            }
        }

        function disablewhenmandatorynamemissingblackname(whiteplayername, blackplayername, firstnameblack, firstnamewhite, lastnameblack, lastnamewhite) {
            if (blackplayername !== "") {
                firstnameblack.disabled = true;
                lastnameblack.disabled = true;
            } else {
                firstnameblack.disabled = false;
                lastnameblack.disabled = false;
            }
        };

        function checkeitherfirstorfullnamepopulated(whiteplayername, firstnamewhite, blackplayername, firstnameblack, isformvalid) {
            if ((whiteplayername === "" || whiteplayername === null) && (firstnamewhite.trim() === "")) {
                return false;
            }
            else if ((blackplayername === "" || blackplayername === null) && (firstnameblack.trim() === "")) {
                return false;
            }
            return true;
        };
    </script>
    <body style="background-color:rgb(68, 57, 57);">
     <div class="warning">
    <p id="warningtext"></p><br>
     </div>
    <div class="topnav">
    <a th:href="@{main.html}"><i class="material-icons"
                                 style="border:2px;font-size:60px;color:rgb(0, 0, 0);">arrow_back</i></a>
    </div>
    <div class="formformat">
    <form th:object="${game}" th:action="@{/addgame}" th:method="post">
        <label for="whiteplayername">Select white player:</label>
        <select name="whiteplayername" id="whiteplayername" th:object="${names}" th:field="${game.whitePlayerName}">
            <option th:value="null" th:selected="${game.name == null}"></option>
            <th:block th:each="name : ${names}">
                <option th:value="${name.name}"
                        th:text="${name.name}"></option>
            </th:block>
        </select>
        <label for="blackplayername">Select black player:</label>
        <select name="blackplayername" id="blackplayername" th:object="${names}" th:field="${game.blackPlayerName}">
            <option th:value="null" th:selected="${game.name == null}"></option>
            <th:block th:each="name : ${names}">
                <option th:value="${name.name}"
                        th:text="${name.name}"></option>
            </th:block>
        </select><br><br>
        <label for="firstnamewhite">First name white:</label>
        <input type="text" id="firstnamewhite" th:field="*{firstNameWhite}"/>
        <label for="firstnameblack">First name black:</label>
        <input type="text" id="firstnameblack" th:field="*{firstNameBlack}"/><br><br>
        <label for="lastnamewhite">Last name white:</label>
        <input type="text" id="lastnamewhite" th:field="*{lastNameWhite}"/>
        <label for="lastnameblack">Last name black:</label>
        <input type="text" id="lastnameblack" th:field="*{lastNameBlack}"/><br><br>
        <label for="date">Date:</label><br>
        <input type="date" id="date" th:field="*{date}">
        <table>
            <tr>
                <th>Move</th>
                <th>White</th>
                <th>Black</th>
            </tr>
            <tr>
                <td>1</td>
                <td><input type="text" id="white1" th:field="*{moves}"></td>
                <td><input type="text" id="black1" th:field="*{moves}"></td>
            </tr>
        </table>
        <input type="submit" value="Submit" id="submit-button">
    </form>

</div>
<br><br>
</body>
</html>
JavaScript

2条答案

按热度按时间
2ekbmq32

2ekbmq321#

你也能提供html代码吗？我也建议正确命名你的变量和函数，因为顺便说一句，它们很难辨认。试着至少用大写字母输入每个单词的第一个字母。
取代：

let firstnameblack

执行：

let firstNameBlack

我还建议根据指定该变量的内容放置2或3个字母，例如，如果它是一个按钮，请执行以下操作：

let btnFirstNameBlack

无论如何，如果你能提供的html代码，也许我可以帮助你的按钮问题。

赞(0）分享  回复(0）举报  2023-01-24
euoag5mw

euoag5mw2#

这里有一个可以满足您所有要求的解决方案：

<script type="module">
  const form = document.getElementById("form");
  const submitButton = document.getElementById("submitbutton");
  const whitePlayerName = document.getElementById("whiteplayername");
  const blackPlayerName = document.getElementById("blackplayername");
  const firstNameBlack = document.getElementById("firstnameblack");
  const firstNameWhite = document.getElementById("firstnamewhite");
  const lastNameWhite = document.getElementById("lastnamewhite");
  const lastNameBlack = document.getElementById("lastnameblack");
  
  form.addEventListener('change', () => {
    const whiteNameSelected = whitePlayerName.value;
    
    // Disable white name inputs if white name is selected in the dropdown
    firstNameWhite.disabled = whiteNameSelected;
    lastNameWhite.disabled = whiteNameSelected;
    
    // Determine if the white name is either selected or typed in the inputs
    const validWhiteName = whiteNameSelected || (firstNameWhite.value && lastNameWhite.value);
    
    const blackNameSelected = blackPlayerName.value;
    
    // Disable black name inputs if black name is selected in the dropdown
    firstNameBlack.disabled = blackNameSelected;
    lastNameBlack.disabled = blackNameSelected;
    
    // Determine if the black name is either selected or typed in the inputs
    const validBlackName = blackNameSelected || (firstNameBlack.value && lastNameBlack.value);
    
    const submitAvailable = validWhiteName && validBlackName;
    submitButton.disabled = !submitAvailable;
  });
</script>

<form th:object="${game}" th:action="@{/addgame}" th:method="post" id="form">
  <label for="whiteplayername">Select white player:</label>
  <select name="whiteplayername" id="whiteplayername" th:object="${names}" th:field="${game.whitePlayerName}">
    <option th:value="null" th:selected="${game.name == null}"></option>
    <option value="name1">Name 1</option>
    <option value="name2">Name 2</option>
  </select>
  <label for="blackplayername">Select black player:</label>
  <select name="blackplayername" id="blackplayername" th:object="${names}" th:field="${game.blackPlayerName}">
    <option th:value="null" th:selected="${game.name == null}"></option>
    <option value="name1">Name 1</option>
    <option value="name2">Name 2</option>
  </select><br><br>
  <label for="firstnamewhite">First name white:</label>
  <input type="text" id="firstnamewhite" th:field="*{firstNameWhite}"/>
  <label for="firstnameblack">First name black:</label>
  <input type="text" id="firstnameblack" th:field="*{firstNameBlack}"/><br><br>
  <label for="lastnamewhite">Last name white:</label>
  <input type="text" id="lastnamewhite" th:field="*{lastNameWhite}"/>
  <label for="lastnameblack">Last name black:</label>
  <input type="text" id="lastnameblack" th:field="*{lastNameBlack}"/><br><br>
  <label for="date">Date:</label><br>
  <input type="date" id="date" th:field="*{date}">
  <button id="submitbutton" disabled>Submit</button>
</form>

它的工作原理是将所有的逻辑组合到一个处理程序中，用于整个表单的更改。然后，如果在下拉列表中选择了一个名称，它将禁用自定义名称字段，如果没有，它将保持启用状态。代码检查以确保白色和黑人名称都有效，并根据这一点设置提交按钮的启用/禁用状态。
你没有发布你的整个HTML，所以我手动添加了按钮，而且你的选择是动态填充的，所以我不得不在其中硬编码一些选项。请，对于堆栈溢出问题，总是发布其他人可复制的例子，以帮助他们帮助你。

赞(0）分享  回复(0）举报  2023-01-24
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com