Fatal编程技术网

Javascript隐藏表单

javascript

Javascript隐藏表单,javascript,Javascript,我试图在给出一些输入后隐藏表单，但是当我使用.style.display=none时；命令，所有发生的事情就是清除框 这是我的上下文，JS在底部。谢谢 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=devi

我试图在给出一些输入后隐藏表单，但是当我使用.style.display=none时；命令，所有发生的事情就是清除框

这是我的上下文，JS在底部。谢谢

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form class = "input">
        <label for = "name" required>Please enter your name</label>
        <input type="text" id="name"><br><br>
        <label for = "age" required>Please enter your age</label>
        <input type="text" id="age"><br><br>
        <label for = "colour">Please select a colour: </label>
        <select id="colour" required>
            <option value="Yellow">Yellow</option>
            <option value="Blue">Blue</option>
            <option value="Red">Red</option>
            <option value="Green">Green</option>
        </select><br><br>
        <label for="">Select your difficulty:</label>
        <select id="difficulty">
            <option value = "1">1. Easy</option>
            <option value = "2">2. Medium</option>
            <option value = "3">3. Hard</option>
        </select>
        <br><br>
        <input type="submit" onclick="clearScreen()">
    </form>
    <script>
        function clearScreen() {
            var x = document.getElementsByID("input");
            x.style.display = none;
        }
    </script>
</body>
</html>
我在这里做了三个简单的改变。为了测试，我将form class=input更改为id=input，在form元素中添加了onsubmit=return false，并将函数第一行中的函数调用更改为getElementById

功能清屏{ var x=document.getElementByIdinput； x、 style.display=无； } 请输入您的姓名 请输入您的年龄 请选择一种颜色： 黄的 蓝色 红色 绿色 选择您的难度： 1.容易的 2.中等的 3.坚固的
我在这里做了三个简单的改变。为了测试，我将form class=input更改为id=input，在form元素中添加了onsubmit=return false，并将函数第一行中的函数调用更改为getElementById

功能清屏{ var x=document.getElementByIdinput； x、 style.display=无； } 请输入您的姓名 请输入您的年龄 请选择一种颜色： 黄的 蓝色 红色 绿色 选择您的难度： 1.容易的 2.中等的 3.坚固的 试试这个：

HTML

JavaScript

看这把小提琴：

试试这个：

HTML

JavaScript

看这把小提琴：

文件 请输入您的姓名 请输入您的年龄 请选择一种颜色： 黄的 蓝色 红色 绿色 选择您的难度： 1.容易的 2.中等的 3.坚固的 切换 函数Clearscrene{ var x=document.getElementByIdinput； x、 style.height=0； x、 style.overflow='hidden' } 函数切换形式{ var x=document.getElementByIdinput； 如果x.style.height{ x、 style.height=； x、 style.overflow=； }否则{ x、 style.height=0； x、 style.overflow='hidden' } } 文件 请输入您的姓名 请输入您的年龄 请选择一种颜色： 黄的 蓝色 红色 绿色 选择您的难度： 1.容易的 2.中等的 3.坚固的 切换 函数Clearscrene{ var x=document.getElementByIdinput； x、 style.height=0； x、 style.overflow='hidden' } 函数切换形式{ var x=document.getElementByIdinput； 如果x.style.height{ x、 style.height=； x、 style.overflow=； }否则{ x、 style.height=0； x、 style.overflow='hidden' } }
这回答了你的问题吗？您的onclick位于提交按钮上。如果你点击表单中的提交按钮，它将提交表单，重新加载页面。将表单放入div并隐藏div。你的x是一个集合，你不能像那样隐藏-迭代它们-但这不是你想要的…这回答了你的问题吗？您的onclick位于提交按钮上。如果你点击表单中的提交按钮，它将提交表单，重新加载页面。将表单放入div并隐藏div。你的x是一个集合，你不能像那样隐藏-对其进行迭代-但这不是你想要的。。。 
  <form id="theForm">
        <!-- your form elements -->
        <input type="submit" />
  </form>

.hide {
  visibility: hidden;
}

var theForm = document.getElementById("theForm");
theForm.addEventListener('submit', function(e) {
  e.preventDefault();
  this.classList.add("hide");
});