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>
Related
I'm trying to hide an element based on its ID, but, I haven't been able to get it to work. I've Googled the answer but, no matter what I do, I can't seem to get it to work for me.
My code is attached below.
<!DOCTYPE html>
<html>
<!-- HTML -->
<body>
<div id="role" value="Edit">
<button> Edit </button>
</div>
</body>
<!-- Javascript -->
<script>
if(document.getElementById("role").value == 'Edit'){
document.getElementById("role").style.display = 'none';
}
</script>
</html>
You can use the code below, you want to get an attribute and not the value.
You can use querySelector instead of getElementById if you want.
var role = document.querySelector('#role');
if(role.getAttribute('value') == 'Edit'){
role.style.display = 'none';
}
<!DOCTYPE html>
<html>
<!-- HTML -->
<body>
<div id="role" value="Edit">
<button> Edit </button>
</div>
</body>
</html>
Have you tried this?
<!DOCTYPE html>
<html>
<!-- HTML -->
<body>
<div id="role" value="Edit">
<button> Edit </button>
</div>
</body>
<!-- Javascript -->
<script>
if(document.getElementById("role").getAttribute('value') == 'Edit'){
document.getElementById("role").style.display = 'none';
}
</script>
In your example document.getElementById("role").value is undefined. To retrieve an attribute value you should use element.getAttribute('attr') method or element.attributes[attr].value.
In your case it would be document.getElementById("role").attributes['value'].value
I don't know why the code got no error but isn't displaying the message in JavaScript in the mood function ! It's only displaying the div.
function mood() {
var box = document.getElementById('t');
document.getElementById('t').innerHTML = "Hey <strong>Thanks!</strong>";
}
<div onload="mood()" style="display: block" id="t">HEYYYYY</div>
Add the onload in body instead of div
<!DOCTYPE html>
<html>
<head>
<title>MA page web</title>
<script>
function mood(){
var box = document.getElementById('t');
document.getElementById('t').innerHTML = "Hey <strong>Thanks!</strong>";
}
</script>
</head>
<body onload="mood()">
<div style="display: block" id="t">HEYYYYY</div>
</body>
</html>
var box = document.getElementById('t');
function mood() {
box.innerHTML = "Hey <strong>Thanks!</strong>";
}
window.addEventListener('load', mood)
<!DOCTYPE html>
<html>
<head>
<title>MA page web</title>
<script>
</script>
</head>
<body>
<divstyle="display: block" id="t">HEYYYYY</div>
</body>
</html>
You can use an event listener. This waits until the window is loaded and then runs the function. I hope this helps :)
The onload attribute is only supported on the following HTML tags: <body>, <frame>, <frameset>, <iframe>, <img>, <input type="image">, <link>, <script> and <style>.
I've adjusted your example below, moving the onload attribute to the body tag in this instance.
function mood() {
var box = document.getElementById('t');
document.getElementById('t').innerHTML = "Hey <strong>Thanks!</strong>";
}
<body onload="mood()">
<div id="t" style="display: block">HEYYYYY</div>
</body>
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>
I Just can't find the answer to this.
I have a div in my webpage, above on a different layer. I simply want to have a button or tag inside this div which will hide it. I have tried:
<html>
<head>
<script language="javascript">
myFunction()
{
document.getElementById("corporate_background").setAttribute("style", "display:none;");
}
</script>
</head>
<body>
<p>aajhahaksha</p>
<div id="corporate_background">
Close
<P>content...</P>
</div>
</body>
Could someone please show me where I have gone wrong.
Do this:
<html>
<head>
<script language="javascript">
function myFunction()
{
document.getElementById("corporate_background").setAttribute("style", "display:none;");
}
</script>
</head>
<body>
<p>aajhahaksha</p>
<div id="corporate_background">
Close
<P>content...</P>
</div>
</body>
This is just because you didn't define myFunction() as a function .
Next time, open your debugger with F12, and see what it is saying... !
You missed out declaring your function at the beginning
myFunction()
{
document.getElementById("corporate_background").setAttribute("style", "display:none;");
}
You should declare using the keyword function.
function myFunction()
{
document.getElementById("corporate_background").setAttribute("style", "display:none;");
}
You should probably use an event listener on your anchor also instead of using inline javascript. No harm just best practice.
Try this:
<html>
<head>
<script language="javascript">
function myFunction()
{
document.getElementById("corporate_background").style.display='none';
}
</script>
</head>
<body>
<p>aajhahaksha</p>
<div id="corporate_background">
Close
<P>content...</P>
</div>
</body>
</html>
I think what you wanna do is hide the content, so you can hide content like this,
Make the button ;
<button id="btn" name="button">Hide content</button>
By clicking the button it wil hide the div corporate_background
<script>
$(document).ready(function () {
$('#btn').click(function () {
$('#corporate_background').hide();
});
});
</script>
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.