Can someone please explain to me why this plain-jane web page does NOT do what it is supposed to do, that is to say, change the style from display:none; to display:block; ??
thanks!
function ShowHideModal(elemID) {
var Selem = document.getElementById(elemID);
if (Selem != null)
{
if (Selem.style.display == "none")
Selem.style.display = "block;"
else
Selem.style.display = "none;"
}
}
TryIt
<div id="test1" style="display:none;">
This is my content baby!
</div>
You are placing the ";" inside the quotations for "block;" and "none;".
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
TryIt
<div id="test1" style="display:none;">
This is my content baby!
</div>
<script type="text/javascript">
function ShowHideModal(elemID) {
var Selem = document.getElementById(elemID);
if (Selem != null) {
if (Selem.style.display === "none") {
Selem.style.display = "block";
} else {
Selem.style.display = "none";
}
}
}
</script>
</body>
</html>
Related
I am trying to get a SideNav to open and close affter pressing a button. However, I can only get it to close. When I pass the sideNave() function to button.addEventListener("click", ... ) nothing happens. I would appriciate your help a lot! My code bellow:
const left = document.querySelector("left");
const right = document.querySelector("right");
const button = document.querySelector("button");
button.addEventListener("click", close);
const x = true;
function close() {
document.getElementById("left").style.width = "0";
document.getElementById("right").style.width = "100%";
x = false;
}
function open() {
document.getElementById("left").style.width = "15%";
document.getElementById("right").style.width = "85%";
x = true;
}
function sideNav() {
if (x = true) {
w3_close();
} else {
open();
}
}
<!DOCTYPE html>
<html>
<head>
<title>WebPage</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="webPage.css">
<meta charset="utf-8">
<script src="https://kit.fontawesome.com/62ea397d3a.js" crossorigin="annonymous"></script>
</head>
<body>
<div class="header"></div>
<div id="left">
<button class="button">Click Me!</button>
</div>
<div id="right">
<p></p>
</div>
</body>
</html>
Click on the ☰ symbol to open the sidebar (overlays some of the page content). function w3_open () { document.getElementById("mySidebar").style.display = "block"; } function w3_close () {
i'm trying to get value of input field, so depending on if the input value is 0 or 1, the value of the input is one or two, and it's supposed to show up in console.
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>demo</title>
<meta charset="utf-8">
<style>
</style>
</head>
<body>
<p>Input 0 or 1.</p>
<input id="ok" type="text">
<button onclick="functionn()"></button>
<script>
var x = document.getElementById("ok").value;
function functionn() {
if (x == 0) {
ok = "one";
console.log(ok); }
else if (x == 1) {
ok = "two";
console.log(ok);
} else {
alert("please input 0 or 1");
}
}
</script>
</body>
</html
You are so close!
The problem that you have is the "x" variable, it holds the value on the input after the page was loaded, which is and empty string.
You need to put that variable inside the function, so every time you click the button you will "go" and check the value of the input and then store it inside the "x" variable.
Hope this help! =]
try it:
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>demo</title>
<meta charset="utf-8" />
<style></style>
</head>
<body>
<p>Input 0 or 1.</p>
<input id="ok" type="text" />
<button onclick="functionn()"></button>
<script>
var x = document.getElementById("ok");
function functionn() {
if (x.value === "0") {
ok = "one";
console.log(ok);
} else if (x.value === "1") {
ok = "two";
console.log(ok);
} else {
alert("please input 0 or 1");
}
}
</script>
</body>
</html>
I have a document where it goes like this:
<!DOCTYPE html>
<html>
<head>
<!-- some title, meta stuff and css -->
</head>
<body>
<style src="/secondvid.js"></style>
<div id="vid1"></div>
<button onclick="showSecondVid('vid1', 'vid2');">Video 2</button>
<div id="vid2" style="display: none;"></div>
</body>
</html>
What is inside the divs is not important, but the script looks like this:
function showSecondVid(vid1Id, vid2Id) {
document.getElementById(vid1Id).style.display = "none";
document.getElementById(vid2Id).style.display = "block";
document.querySelectorAll('button')[0].style.display = "none";
dayUp();
}
function dayUp() {
if (localStorage.dayFinished === 4) {
localStorage.dayFinished = 0;
} else if (localStorage.dayFinished) {
localStorage.dayFinished++;
}
}
When I click the button, nothing happens. Can someone help?
I want the first div to disappear and the second one to appear.
Try to call your script like this :
<script src="/secondvid.js"></script>
instead of
<style src="/secondvid.js"></style>
<!DOCTYPE html>
<html>
<head>
<title>Face</title>
<meta charset="UTF-8">
<script type="text/javascript">
//<![CDATA[
function myFunction(id) {
var e = document.getElementById(id);
if(e.style.visibility == "visible")
e.style.visibility = 'hidden';
else
e.style.visibility = 'visibile';
}
</script>
</head>
<body>
<div style="position: relative; visibility: visible;">
<img src="http://vignette4.wikia.nocookie.net/mrmen/images/5/52/Small.gif/revision/latest?cb=20100731114437"
alt="Pumpkins" id="Pum"/>
<button onclick="myFunction('Pum')">Face</button>
</div>
</body>
</html>
I trying to have a button that shows/hidden my image. I don't understand what I am doing wrong . I am getting an error that says "TypeError: Cannot read property 'visibility' of null". How do I fix my error and make my program work ?
Your problem is a typo in the code
function myFunction(id) {
var e = document.getElementById(id);
if(e.style.visibility == "visible")
e.style.visibility = 'hidden';
else
e.style.visibility = 'visible'; // <-------- SHOULD BE 'visible', was 'visibile'
}
This should fix your problem.
Thanks in advance.
Please find the following script, it alerts e.value = "yes" in fire fox and "no" chrome...
what' wrong with this code?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>new_file</title>
<script type="text/javascript">
function func(){
alert("I am at Func")
}
var i = 0;
document.write("<form style='display: block'><input name='test' id='test' value='no'></form>");
window.onload = function () {
global();
};
function global(){
var e=document.getElementById("test");
alert(e.value);
if(e.value=="no" && i == 0 ){
e.value="yes";
i = 1;
}
else {
//e.value="no";
func();
}
}
</script>
</head>
<body>
</body>
</html>
What i need is based on that e.value i need to call the func()? Any one please answer it...