I want to set div to "display:none" on pageload in HTML when it haven't been loaded before, which in ASP.NET called if(!IsPostBack), i don't know what's called in HTML.
function startUP()
{
document.getElementById('output').style.display = "none";
}
<body onload='startUP();'>
<div id='output'>
<p>hide me on load and show me onclick<p>
</div>
<button id='showOutput'/>
I don't know what it's called, so i tried to explain it.
This works:
<!DOCTYPE html>
<html>
<head>
<script>
function startUP() {
document.getElementById('output').style.display = "none";
}
</script>
</head>
<body onload='startUP();'>
<div id='output'>
<p>hide me on load and show me onclick<p>
</div>
</body>
</html>
Related
So I need some help, I am new to JS and I need to to find a solution to the problem I am having. I am trying to create a button when it clicks changes a piece of text. When I create a JS function in the script tag header and reference the function in the button onclick it works, but it doesn't work in a separate JS file. The HTML code is below. Hopefully, someone can help me.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="changetext.js"></script>
<script>
function Button() {
document.getElementById("demo").innerHTML = "hello";
}
</script>
<script>
function Button2() {
document.getElementById("demo").innerHTML = "hi";
}
</script>
</head>
<body>
<p id="demo"> hi</p>
<button id="ButtonText" onclick="Button()"> Click Here To Change The Text</button>
<button id="ButtonText2" onclick="Button2()"> Click Here To Change The Text Back</button>
<script type="text/javascript" src="changetext.js"></script>
</body>
</html>
this is an example...
<!DOCTYPE html>
<html>
<head>
<title>example</title>
</head>
<body>
<p id="demo"> hi</p>
<button id="ButtonText" onclick="Button()"> Click Here To Change The Text</button>
<button id="ButtonText2" onclick="Button2()"> Click Here To Change The Text Back</button>
<script type="text/javascript" src="changetext.js"></script>
</body>
</html>
first you need remove your script.. we include script only if you dont use a external js.
on your external js(changetext.js)
function Button(){
document.getElementById("demo").innerHTML = "hello from button 1";
}
function Button2(){
document.getElementById("demo").innerHTML = "Hellow from button2";
}
result:
if you dont use a external js the code is this:
<!DOCTYPE html>
<html>
<head>
<title>example</title>
</head>
<body>
<p id="demo"> hi</p>
<button id="ButtonText" onclick="Button();"> Click Here To Change The Text</button>
<button id="ButtonText2" onclick="Button2();"> Click Here To Change The Text Back</button>
<script type="text/javascript" src="changetext.js"></script>
</body>
</html>
<script>
function Button(){
document.getElementById("demo").innerHTML = "hello from button 1";
}
function Button2(){
document.getElementById("demo").innerHTML = "Hellow from button2";
}
</script>
we write the code js in the tag script good luck !!
Write your function in changetext.js and make sure that is in same place as your HTML file.
change onclick to onClick
and remove your script tags in the head
I have page that needs to hide all but the first element.
However, the first element continues to be hidden, despite the fact that I have JS telling it to show.
The code works fine on this page:
https://www.dinnerthyme.com/yo-join.aspx
as the first div is shown (even though there is inline css saying "display:none")
However with this test page, it doesn't show any element. If I remove the inline CSS saying "display:none;" of course it will show the first element, but then I cannot be sure that the rest of the JS is working. I'm starting with this code block for testing purposes.
Here is the code:
<!DOCTYPE html>
<html lang="en">
<body>
<script type="text/javascript">
function pageLoad() {
document.getElementById("one").style.display = "";
document.getElementById("two").style.display = "none";
document.getElementById("three").style.display = "none";
}
</script>
<div>
<div>
<div>
<h1> Junk </h1>
<p>stuff </p>
<div id="one" style="display:none;"> <p>hjdshfjshjshjsdjfskfsdkjf</p></div>
<div id="two" style="display:none;"> <p>hjdshfjshjshjsdjfskfsdkjf</p></div>
<div id="three" style="display:none;"> <p>hjdshfjshjshjsdjfskfsdkjf</p></div>
</div>
</div>
</div>
</body>
</html>
In your body tag call pageLoad
<body onload="pageLoad()">
....
If you could change the body tag, use this:
<body onload="pageLoad()">
But, if it's a partial code and you don't want to change the body tag, simply add this at the end of your code:
<script>
pageLoad();
</script>
Your code works fine with me, make sure to call your pageLoad() function,
<body onload="pageLoad()">
see working demo: http://jsbin.com/xeribupora/edit?html,output
There are multiple ways to do this.
In Css
p div:nth-of-type(n+1){
display:none;
}
In javascript
window.onLoad=function(){
document.getElementById("one").style.display = "";
document.getElementById("two").style.display = "none";
document.getElementById("three").style.display = "none";
};
I dont know if this is of much use though.:-/
As mentioned, you need to call pageLoad(). Here's one way of doing it using JavaScript:
window.addEventListener("load", function load(){
window.removeEventListener("load", load, false);
pageLoad();
},false);
Et voila!
function pageLoad() {
document.getElementById("one").style.display = "";
document.getElementById("two").style.display = "none";
document.getElementById("three").style.display = "none";
}
<!DOCTYPE html>
<html lang="en">
<body onload="pageLoad();">
<div>
<div>
<div>
<h1> Junk </h1>
<p>stuff </p>
<div id="one"><p>hjdshfjshjshjsdjfskfsdkjf</p></div>
<div id="two"><p>hjdshfjshjshjsdjfskfsdkjf</p></div>
<div id="three"><p>hjdshfjshjshjsdjfskfsdkjf</p></div>
</div>
</div>
</div>
</body>
</html>
I am working on something, and I don't have any codes for now, because I have no idea how to do this! Please help me out here :D
What I think would be nice is if I could make a password that changes my style:
<html>
<head>
<style>
.passwordProtected {
display:none; <- this is supposed to change to "block" when the password is written in, and they click "Show div"
}
</style>
</head>
<body>
<div id="loginArea">
<input type="password"> <--- This is where they type the password
</div>
<div id="passwordprotected" class="passwordProtected">
<h1>This is the protected div they enter</h1>
</div>
</body>
</html>
What do I do?
If I'm understanding you right, the code would look something like this:
<html>
<head>
<style>
.passwordProtected {
display:none;
}
</style>
</head>
<body>
<div id="loginArea">
<input type="password">
<button onclick='showDiv();'>Show div</button>
</div>
<div id="passwordprotected" class="passwordProtected">
<h1>This is the protected div they enter</h1>
</div>
<script type="text/javascript">
function showDiv(){
var myDiv = document.querySelector('.passwordProtected');
myDiv.style.display = 'block';
}
</script>
</body>
</html>
You can find out more about styling with JavaScript here: http://www.w3schools.com/jsref/dom_obj_style.asp.
I have the following page:
<!doctype html>
<html lang="en" class="darkBlue">
<head>
</head>
<body>
#RenderSection("Content")
<div class="loading-mask" id="loading-mask" style="display: none;">
<span>Authenticating ...</span>
</div>
<script type="text/javascript">
(function() {
document.getElementsByClassName('form')
.addEventListener("submit", function () {
alert("hi");
document.getElementById("loading-mask").style.display = "block";
}, false);
})();
</script>
</body>
</html>
and this partial page:
#{ Layout = "~/Views/Account/Layout.cshtml"; }
#section content {
<form action="/Account/Login" class="form" method="post">
<button type="submit" class="glossy">Login</button>
</form>
}
I want the loading-mask div to become visible when the submit is pressed. However this does not seem to happen. Could this be because my partial is not yet loaded? Can anyone give me some advice how I could make this work?
Try using
document.getElementsByClassName('form')[0]
instead of
document.getElementsByClassName('form')
That's because getElementsByClassName returns a HTMLCollection object instead of an Element one, like document.getElementById does.
i am a beginner to java script.i do the bellow code for changing the text color into red using java script.But it doesn't work.what is the error in my code?
<!DOCTYPE html>
<html>
<head>
<script>
function display()
{
var col=document.getElementById("demo").innerHTML;
col.style.color="red";
}
</script>
</head>
<body>
<h1>My First JavaScript</h1>
<p id="demo">click on the button bellow.....</p>
<button onclick="display()">Display</button>
</body>
</html>
Remove innerHTML from var col=document.getElementById("demo").innerHTML;
<!DOCTYPE html>
<html>
<head>
<script>
function display()
{
var col=document.getElementById("demo");
col.style.color="#FF0000";
}
</script>
</head>
<body>
<h1>My First JavaScript</h1>
<p id="demo">click on the button below.....</p>
<button onclick="display()">Display</button>
</body>
</html>
Dont use the innerHTML, it returns a String.
Use the style on the object itself.
Check out it working: JsFiddle
You can try this ...
document.getElementById('demo').style.color = '#FF0000';
Replace this code:
function display()
{
var col=document.getElementById("demo").innerHTML;
col.style.color="red";
}
with this:
function display()
{
var col=document.getElementById("demo");
col.style.color="red";
}
Inner html would contain the html inside the demo tag, but you need to refer to the tag itself.
<!DOCTYPE html>
<html>
<head>
<script>
function display()
{
document.getElementById("demo").style.color="red";
}
</script>
</head>
<body>
<h1>Your Fixed JavaScript</h1>
<p id="demo">click on the button bellow.....</p>
<button onclick="display()">Display</button>
</body>
</html>
Here's the fixed one I just made the change of the words turn red because it wasn't