This question already has answers here:
How do I call a JavaScript function on page load?
(8 answers)
Closed 1 year ago.
I'm making a prank .html page for a friend. The prank was, you would push a button and a phrase would pop up under the button. I figured out a way to hide the phrase and unhide it. The problem is that, when you load into the page, the phrase would already be on the screen. How do I keep it hidden on page load?
function Function() {
var x = document.getElementById("urmom");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
<p>Click the "Try it" button to toggle between hiding and showing the DIV element:</p>
<button onclick="Function()">Try it</button>
<div id="urmom">
ur mom
</div>
<p><b>Note:</b> The element will not take up any space when the display property set to "none".</p>
Set with CSS first as NONE.
function Function() {
var x = document.getElementById("urmom");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<p>Click the "Try it" button to toggle between hiding and showing the DIV element:</p>
<button onclick="Function()">Try it</button>
<div id="urmom" style="display:none">
ur mom
</div>
<p><b>Note:</b> The element will not take up any space when the display property set to "none".</p>
</body>
</html>
Related
I got this code for JavaScript and I have an error; when I use more than one read more button, it shows the first text only. If I used 3 buttons and I press on any of these 3, only the first one would show the first one in HTML and the bottom ones are not even there.
The only solution I tried is to change the variable names and the function names for this to work and used same function again and again but I want one function for all the read more buttons.
I'm not allowed to use jQuery for this college project so if you could help me in JavaScript thank you.
The button code:
<span id="dots1">...</span>
<span style="display: none;" id="more1">The text I want to be on read more</span>
</p></p>
<button onclick="Show1()" class="btn" id="myBtn1">Read more</button>
and this is the JavaScript code:
function Show() {
var dots = document.getElementById("dots");
var moreText = document.getElementById("more");
var btnText = document.getElementById("myBtn");
if (dots.style.display === "none") {
dots.style.display = "inline";
btnText.innerHTML = "Read more";
moreText.style.display = "none";
} else {
dots.style.display = "none";
btnText.innerHTML = "Read less";
moreText.style.display = "inline";
}
}
It seems what you need is to re-use the same function for any amount of buttons on your page, to show and hide the text.
To do this, you would first group up each set of button and span elements, e.g. putting a div around them. This step is important, since it allows us to easily refer to other elements in the same group.
Then, you can add an event listener on all the buttons, listening on the click event (this is very similar to the onclick attribute you currently use - but is very much preferred). The handler for this can more or less be your existing function -- slightly adapted though. Instead of selecting the span elements by their id, you can use querySelectorAll on the parentElement of the button -- this being the div we added earlier. This would find two such spans -- dots and moreText. The rest of the function would remain the same.
Here is a working snippet that demonstrates this for two buttons. The JS would still work if you add further buttons as needed.
for (const btn of document.querySelectorAll('.btn')) {
btn.addEventListener('click', () => {
const [ dots, moreText ] = Array.from(btn.parentElement.querySelectorAll('span'));
if (dots.style.display === "none") {
dots.style.display = "inline";
btn.innerHTML = "Read more";
moreText.style.display = "none";
} else {
dots.style.display = "none";
btn.innerHTML = "Read less";
moreText.style.display = "inline";
}
});
}
<div>
<span id="dots1">...</span>
<span style="display: none;" id="more1">The text I want to be on read more</span>
<p></p>
<button class="btn" id="myBtn1">Read more</button>
</div>
<div>
<span id="dots2">...</span>
<span style="display: none;" id="more2">The text I want to be on read more</span>
<p></p>
<button class="btn" id="myBtn2">Read more</button>
</div>
If I understand your problem correctly, I think the problem is that you use getElementById and you keep calling the same part of the html with every button.
to solve this you could give every Read More part in your html a different id and call this in your javascript accordingly.
You want to kind of toggle the btn text, also show and hide content on btn cliks. I have created it for you :)
Have made basic changes in HTML file. Do pay attention :)
const btn = document.querySelector(".btn");
const span2 = document.querySelector(".more2");
btn.addEventListener("click",(e)=>{
if(span2.style.display === "none"){
span2.style.display = "inline-block";
btn.textContent = "Read Less";
}else if(span2.style.display === "inline-block"){
span2.style.display = "none";
btn.textContent = "Read More";
}
});
div{
margin-bottom:1rem;
}
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div>
<span id="dots1">...</span>
<span class="more2" style="display: none;">The text I want to be on read more</span>
</div>
<button class="btn">Read more</button>
</body>
</html>
Create 4 buttons, each to modify a paragraph. Each button should turn on or off the changes to the paragraph on each click of the button.
1. Toggle bold button should bold the paragraph.
2. Toggle position should change the position of the paragraph
3. Toggle color will change the color
4. Toggle size will change the size.
My code till now:`
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<p>Click the button to bold the text of the DIV element:</p>
<p><button onclick="myFunction()">Toggle Bold</button></p>
<div id="myDIV">Hello</div>
<script>
function myFunction() {
var x = document.getElementById("myDIV");
if (x.innerHTML === "Hello") {
x.innerHTML = ;
} else {
x.innerHTML = "Hello";
}
}
</script>
</body>
</html>
Now, here I do not know how to change the paragraph text to bold in this. Moreover, I have to use the event handler for 4 buttons. How can I do it?
You can use the button to toggle the bold-ness of the paragraph by toggling the font-weight style.
function myFunction() {
var div = document.getElementById("myDIV");
if (div.style['font-weight']) {
div.style.removeProperty('font-weight');
} else {
div.style['font-weight'] = 800;
}
}
<p>Click the button to bold the text of the DIV element:</p>
<p><button onclick="myFunction()">Toggle Bold</button></p>
<div id="myDIV">Hello</div>
for the handling of four buttons with one function part you can do something like this.
as you create four buttons for each paragraph. modify the onclick event like
<p><button onclick="myFunction('myDiv')">Toggle Bold</button></p>
Here you are passing the ID of the paragraph controlled by the given button to the function
and modify the event handler with a div paramter like
function myFunction(asdf) {
var x = document.getElementById(asdf);
----your function----
}
Function
function myFunction() {
var x = document.getElementById("myDIV");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
<button onclick="myFunction()">Try it</button>
<div id="myDIV">
This is my DIV element.
</div>
I found this code on W3Schools and replaced "myDIV" with "h3" so I can change the text in my header
<div class="speech-buble-top"><h3 id="h3"> Happy Birthday Tiffany!</h3></div>
there are no script tags add the javascript tags.
<script type="text/javascript"> your code </script>
The issue stems from you declaring the function using the function keyword. Usually this is fine, but I find that it's easier to work with javascript functions called by HTML as functions that have been assigned to a variable. If you use ES6 arrow syntax, you'll both be using the latest standards and binding the function to a variable. Try rewriting the function code like so:
<script>
myFunction = () => {
var x = document.getElementById("myDIV");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>
<button onclick="myFunction()">Try it</button>
<div id="myDIV" style="display: none">
<h3 id="h3"> Happy Birthday Tiffany!</h3>
</div>
Your JS function must be declared before your button. And must be enclosed in <script> </script> tags
You could use addEventListner() insted of inline HTML onclick(). Try this:
var x = document.getElementById("myDIV");
document.getElementById("myBtn").addEventListener('click', function() {
if (x.style.display == "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
});
#myDIV {
border: 1px solid black;
padding: 3px;
}
<button type="button" id="myBtn">Show</button>
<div id="myDIV" style="display: none;">Show the content</div>
Notice that x.style.display detect the inline style HTML attribute. Becouse of that, if you use a separate css file to styling the div, you'll need twice click for the first time...
If you are trying to inline your code within the webpage then yes you will need to make sure you classify what type of code you are using. <style></style> is for CSS and <script></script> is for Javascript.
It seems like you are trying to perform a simple hide/show script. One thing that you should work on is efficiency of your code. The chunky code in your question can be shortened to this:
function toggleHide() {
var element = document.getElementById("myDIV");
element.classList.toggle("hide");
}
.hide {
display: none;
}
<button onclick="toggleHide()">Try it</button>
<div id="myDIV">This is a DIV element.</div>
Here is what it looks like inline:
<style>
.hide {
display: none;
}
</style>
<button onclick="myFunction()">Try it</button>
<div id="myDIV">This is a DIV element.</div>
<script>
function myFunction() {
var element = document.getElementById("myDIV");
element.classList.toggle("hide");
}
</script>
This question already has answers here:
jquery - Collapsing / Expanding divs?
(3 answers)
Closed 8 years ago.
I am trying to make a content DIV to expand and to collapse according to their contents.
Before expand it should be like this -
After expand it should be like this -
I am not sure how to use jquery for this. Tried with toggle class but couldn't get it to work.
This is my all code so far - http://jsbin.com/bicenomi/1/edit
Hope someone will help me.
Thank You.
You may put the extra content in a Div. and make it display: none at beginning, and once a user clicks on View Details just toggle its display to display:block.
and if user clicks on Collapse, make div display:none again.
<html>
<head>
<script type="text/javascript">
function HideInfo() {
var Chck = document.getElementById('ViewCollapse');
alert(Chck.innerHTML);
if (Chck.innerHTML == "Collapse") {
document.getElementById('MoreInfo').style.display = 'none';
Chck.innerHTML = "View";
}
else if (Chck.innerHTML == "View") {
alert('view');
document.getElementById('MoreInfo').style.display = 'block';
Chck.innerHTML = "Collapse";
}
}
</script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="timetable">
<h5><i class="icon fa fa-circle"></i><strong>xxxxxxxxxx</strong></h5>
<h6><small>No words</small></h6>
<h5><small>No words found in this</small></h5>
<h5><strong>xxxxxxxxxx</strong></h5>
<h6><small>No words</small></h6>
<h5><small>No words found in this</small></h5>
<div id="MoreInfo">
<h5><i class="icon fa fa-circle"></i><strong>xxxxxxxxxx</strong></h5>
<h6><small>No words</small></h6>
<h5><small>No words found in this</small></h5>
<h5><strong>xxxxxxxxxx</strong></h5>
<h6><small>No words</small></h6>
<h5><small>No words found in this</small></h5>
</div>
</div>
<div class="viewmore">
<p class="small"><span>Medium:</span> No words</p>
<p onclick="HideInfo();" id="ViewCollapse" class="small">Collapse</p>
</div>
</body>
</html>
i just create a small demo. it works for me, Please try it and tell me does it solves your problem
Check out the demo below
http://jsfiddle.net/hungerpain/eK8X5/7/
JS
$(".header").click(function () {
$header = $(this);
//getting the next element
$content = $header.next();
//open up the content needed - toggle the slide- if visible, slide up, if not slidedown.
$content.slideToggle(500, function () {
//execute this after slideToggle is done
//change text of header based on visibility of content div
$header.text(function () {
//change text based on condition
return $content.is(":visible") ? "Collapse" : "Expand";
});
});
});
Testing out a simple toggle display, however, it takes two clicks to toggle the display the first time. Afterwards it does it in one.
<html>
<head>
<style>
#carousel{border:2px solid blue;
width:1280px;
height:720px;}
#p2{visibility:hidden;}
#p1{display:block;}
#btn{position:absolute;
top:2000px;}
</style>
<script src="mainScript.js"></script>
</head>
<body>
<div id="carousel">
<img id="p1" src="pic1.jpg">
<img id="p2" src="pic2.jpg">
</div>
<button type="button" id="button" onclick="clickEvent()">Click</button>
</body>
</html>
And here is my javascript:
function clickEvent(){
var p = document.getElementById("p1");
if(p.style.display == "block")
p.style.display = "none";
else
p.style.display = "block";
}
It should be noted I am using no jQuery, as all other questions I found about this were jQuery related.
function clickEvent(){
var p = document.getElementById("p1");
if(p.style.display == "none")
p.style.display = "block";
else
p.style.display = "none";
}
you can also simplify things a bit:
p.style.display = p.style.display == "none" ? "block" : "none";
I have an update to my previous fiddle posted in my comment above. My previous fiddle still ran into the same problem after further testing of the double click.
After stepping through, the initial display value is coming back as "" not block. I'm not sure why its not taking your value you set in the <head></head> section but if you inline it like so:
<img id="p1" src="pic1.jpg" style="display: none;" />
it works correctly the first time with only one click of the button.
Here is my new updated fiddle demonstrating this.
I'm going to look more into why your styling in the <head></head> section but for now, here is a quick (and semi crude) fix.
Hope this helps and best of luck!
The default display attribute is "inline" so your logic is not taking this into account. It is changing it the block on the first run, so it is still visible, then it is hiding it on the second click (setting display to none)
your answer
function clickEvent(){
var p = document.getElementById("p1");
if(p.style.display === "block")
p.style.display = "none";
else
p.style.display = "block";
}
I changed the condition I have the same problem and I realize that it was about the order code executes my CSS style for the element was already "block", and I was checking if the element display was "none" then do the display block thing, so when the first time I was clicking, it changed the display to "none", then in the second time it would change the display to block, I hope It was clear my explanation
enjoy
The same problem can be resolved by just replacing "block" : "none"; by ?"none" : "block";
you will not need to double click the toggle button for the first time, single click will work.