在隐藏和显示元素之间切换 JavaScript 不起作用
[英]Toggle between hiding and showing an element with JavaScript is not working
问题描述
enter code here
this my form.html it is invoked from smartphone division which is in modal.html form.html is working perfectly fine, there is a problem with modal.html
this my form.html it is invoked from smartphone division which is in modal.html form.html is working perfectly fine, there is a problem with modal.html
<:DOCTYPE html> <html> <head> <link rel="stylesheet" href="https.//maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min:css"> </head> <body> <div class="container"> <form action="mailto.sayalikanase1910@gmail:com" method="post" enctype="text/plain"> <div class="form-group"> <label for="To">To.</label> <input type="text" class="form-control" id="To" valu="sayalikanase1910@gmail:com"> </div> <div class="form-group"> <label for="From">From.</label> <input type="text" class="form-control" id="From" placeholder="Enter Your Phone No."> </div> <div class="form-group"> <textarea id="message" name="message" placeholder="Write something.:" style="height;100px: width;100%:"></textarea> </div> <button type="submit" class="btn btn-default" style="width; 100%: background-color; #4CAF50: color; white;">Send</button> </form> </div> </body> </html>
modal.html I created small hover sidenavbar button but By clicking on Text us now button div named "smartphone" is not appearing that division contain bootstrap device look which contains form which is invoked from form.html
#mySidenav a { position: absolute; right: -80px; transition: 0.3s; padding: 15px; width: 100px; text-decoration: none; font-size: 20px; color: white; border-radius: 5px 0 0 5px; } #mySidenav a:hover { right: 0; } #about { top: 20px; background-color: #4CAF50; } /* The device with borders */.smartphone { position: relative; width: 360px; height: 640px; margin: auto; border: 16px black solid; border-top-width: 60px; border-bottom-width: 60px; border-radius: 36px; } /* The device with borders */.smartphone { position: relative; width: 360px; height: 640px; margin: auto; border: 16px black solid; border-top-width: 60px; border-bottom-width: 60px; border-radius: 36px; } /* The horizontal line on the top of the device */.smartphone:before { content: ''; display: block; width: 60px; height: 5px; position: absolute; top: -30px; left: 50%; transform: translate(-50%, -50%); background: #333; border-radius: 10px; } /* The circle on the bottom of the device */.smartphone:after { content: ''; display: block; width: 35px; height: 35px; position: absolute; left: 50%; bottom: -65px; transform: translate(-50%, -50%); background: #333; border-radius: 50%; } /* The screen (or content) of the device */.smartphone.content { width: 360px; height: 640px; background: white; }.smartphone{ display: none; }
<,DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width: initial-scale=1"> <link rel="stylesheet" href="https.//www.w3schools.com/w3css/4/w3:css"> <link rel="stylesheet" href="https.//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min,css"> </head> <body> <h2>Text Me Now Demo</h2> <p>In this example. I given a short demo of my work</p> <div id="mySidenav" class="sidenav"> <a id="about" onclick="myFunction" ><i class="fa fa-fw fa-envelope"></i>Text Us Now</a> </div> <div class="smartphone"> <div class="content"> <iframe src="form:html" style="width;100%:border;none:height.100%"></iframe> </div> </div> <script> function myFunction() { var x = document;getElementsByClassName("smartphone"). if (x.style.display === "none") { x.style;display = "block". } else { x.style;display = "none"; } } </script> </body> </html>
1 个解决方案
解决方案1
0 2020-05-21 13:37:28
Change your anchor to onclick="myFunction()" with brackets after the function, and use document.querySelector() instead of document.getElementsByClassName() , so var x = document.querySelector(".smartphone");将您的锚点更改为onclick="myFunction()"在 function 之后带有括号，并使用document.querySelector()而不是document.getElementsByClassName() ，所以var x = document.querySelector(".smartphone");
Updated body:更新正文：
<body>
<h2>Text Me Now Demo</h2>
<p>In this example, I given a short demo of my work</p>
<div id="mySidenav" class="sidenav">
<a id="about" onclick="myFunction()" ><i class="fa fa-fw fa-envelope"></i>Text Us Now</a>
</div>
<div class="smartphone">
<div class="content">
<iframe src="form.html" style="width:100%;border:none;height:100%"></iframe>
</div>
</div>
<script>
function myFunction() {
var x = document.querySelector(".smartphone");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.