gpt4 book ai didi

javascript - input type=submit 被div包含时不提交

转载 作者:行者123 更新时间:2023-11-28 13:55:11 25 4
gpt4 key购买 nike

我希望用户插入他的名字,当他提交函数时,y() 运行。

<!DOCTYPE html>
<html>

<head>

<meta charset="UTF-8">

<title> XXX </title>

<link rel="stylesheet" type="text/css" href="css0.css">


</head>
<body>
<div class="loginbox">
<h1 >Qual o teu nome?</h1>

<input type="text" placeholder="Username" id="a">
<input type="submit" value="Ok" onclick="y();">

</div>

<div id="select" class="menu" >
<ul>
<li><a href="html.html">XXX</a></li>

<li><a href="">O Fenómeno do Apocalypse</a></li>

<li><a href="">O Fenómeno do IMPE</a></li>

<li><a href="">O Fenómeno do RT</a></li>
</ul>
</div>

<style>

</style>

<script src="js.js"></script>
<footer>
<script>

function y() {

let name = document.getElementById("a").value;
sessionStorage.setItem("user",name);
document.getElementById("preventDefault").addEventListener("click", function(event){
event.preventDefault();
})
document.getElementById("select").style.opacity="1";

}

</script>
</footer>
</body>

</html>

.loginbox {
width: 320px;
height: 420px;
background: #000;
color: #fff;
top: 50%;
left: 50%;
position: absolute;
transform: translate(-50%, -50%);
box-sizing: border-box;
padding: 70px 30px;
}

.loginbox h1 {
margin:0;
padding: 0 0 20px;
text-align: center;
font-size: 32px;
color: red;
}

.loginbox input {
width: 100%;
margin-top: 50px;
}

.loginbox input[type="text"] {
border: none;
border-bottom: 1px solid #fff;
background: transparent;
outline: none;
height: 40px;
color: #fff;
font-size: 16px;
}

.loginbox input[type="submit"] {
border: none;
outline: none;
height: 40px;
background: #fb2525;
color: #fff;
font-size: 18px;
border-radius: 20px;
}

.loginbox input[type="submit"]:hover {
cursor: pointer;
background: #ffc107;
color: #000;

}

所有这一切都在起作用,直到我决定要在表单中添加一些样式,所以我将 div 中的所有内容都包含在“loginbox”类中。

当我这样做时,表单从类登录框获取样式但不提交任何内容也不运行函数 y()。悬停效果也不起作用。

在用户应该写下他的名字的输入类型文本中,甚至不可能写任何东西或提交。

添加 div 后所有这些都停止工作。

我想了解原因并解决这个问题。

最佳答案

您需要将提交输入设为 type="button",以便在点击时执行自定义功能而不是提交表单。所以你的按钮将在你的情况下:

 <input type="button" value="Ok" onclick="y();">

我个人更愿意将其定义为按钮:

 <button type="button" value="Ok" onclick="y();"></button>

希望这对您有所帮助。

关于javascript - input type=submit 被div包含时不提交,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58736496/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com