有 <form> 和没有 <form> 的不同行为答案

【问题标题】：different behavior with <form> and without <form>有 <form> 和没有 <form> 的不同行为
【发布时间】：2023-02-13 02:00:15
【问题描述】：

有以下代码：

<div class="my-page">
            <!-- <form id="my-form"> -->
                <h2>Clickable Dropdown</h2>
                <p>Click on the button to open the dropdown menu.</p>
                <fieldset id="my-fieldset">
                    <div class="dropdown">
                        <button onclick="myFunction()" class="dropbtn">1234</button>
                        <div id="File1" class="dropdown-content">
                            <a href="#1">1</a>
                            <a href="#2">2</a>
                            <a href="#3">3</a>
                            <a href="#4">4</a>
                        </div>
                    </div>
                </fieldset>
            <!-- </form> -->
        </div>

如果您在其中注释掉，则一切正常。否则工作是错误的

有人可以解释这里出了什么问题吗？

【问题讨论】：

函数 myFunction() { const myElement = document.getElementById("File1").classList.toggle("show"); } window.onclick = function (event) { if (!event.target.matches(".dropbtn")) { var dropdowns = document.getElementsByClassName("dropdown-content");变量我；对于 (i = 0; i < dropdowns.length; i++) { var openDropdown = dropdowns[i]; // console.log(openDropdown);如果（openDropdown.classList.contains（“显示”））{ openDropdown.classList.remove（“显示”）; } } } }

标签： javascript forms

【解决方案1】：

默认情况下，按钮的类型为 submit。表单中的提交按钮将提交表单，重新加载页面。

如果你想在一个不提交表单的表单中使用一个按钮，明确地给它类型“button”。

<button type="button" onclick="myFunction()" class="dropbtn">1234</button>

【讨论】：