Javascript : why i have to click 2 times to run the function? - javascript

window.onload = function(){
var about2 = document.getElementById("about");
about2.addEventListener("click",about);
}
function about(){
var divabout = document.getElementById("aboutme");
if(divabout.style.display == "none"){
divabout.style.display = "flex";
divabout.style.justifyContent ="center";
}else{
divabout.style.display ="none";
}
}
please tell me the reason why i have to click twice to run this function .And how to fix pls . many thanks .
i just set display:none for 1 div tag in css , and i want to change display attributes .

Because you haven't set any dislplay property to your HTML by default.
That's why On first click javascript sets everything it needs. then started working from 2nd click.
Here is your code, where you dind't add style in html
<div id="about">Hello</div>
<div id="aboutme">About Me</div>
And Here if I fix/add this style="display:flex;justify-content: center;" in your about me like this
<div id="about">Hello</div>
<div id="aboutme" style="display:flex;justify-content: center;">About Me</div>
Now you can check you need only one click to run
window.onload = function() {
var about2 = document.getElementById("about");
about2.addEventListener("click", about);
}
function about() {
var divabout = document.getElementById("aboutme");
if (divabout.style.display == "none") {
divabout.style.display = "flex";
divabout.style.justifyContent = "center";
} else {
divabout.style.display = "none";
}
}
<div id="about">Hello</div>
<div id="aboutme" style="display:flex;justify-content: center;">OK About Me</div>

Related

how to show image on click, and hide it again when clicking again

I want to when I click on a sentence or a button an image appears, and when I click it again it disappears. but my code doesn't seem to work using JS and HTML.
let pic = document.getElementById("hiddenclickimg");
let word = document.getElementById("hiddenclick");
function showPic(){
pic.hidden = 'false' ;
word.style.color = 'red';
word.style.backgroundColor = 'blue';
}
word.onclick = showPic;
<h3 id="Work">Work Experience</h3>
<div class="work">
<ul>
<li>
<img
src="./Images/Alex Sydney.jpg"
alt="alex sydney"
id="hiddenclickimg"
hidden="true"
/>
<button id="hiddenclick">Alex Sydney Hospital</button>
</li>
</ul>
</div>
<script src="./main.js"></script>
You can use the onclick of a button and toggle a class that hides the image when it has that class.
HTML:
<button onclick="imageClick()">Toggle Image</button>
CSS:
.hidden {
opacity: 0;
}
Javascript:
const image = document.getElementById('hiddenclickimg');
const imageClick = () => {
image.classList.toggle('hidden');
}
There are different CSS properties you could use to hide the image, but opacity is a good basic one.
You don't need to set 2 ids to do the trick using css property display none.
For example you want to hide that image:
<img id="dog_image" src="dog.png" alt="Rex the Labradoodle" >
function hideDog() {
const dog = document.getElementById("dog_image");
if (dog.style.display === "none") {
dog.style.display = "block";
} else {
dog.style.display = "none";
}
}
And then just set the button:
<button onclick="hideDog()">Hide/Show my dog</button>
you can use flag to change state of the image like following
let imagehidden =false
let pic = document.getElementById('hiddenclickimg');
let word = document.getElementById('hiddenclick');
function showPic(){
if(imagehidden){
pic.hidden = false ;
word.style.color = 'red';
word.style.backgroundColor = 'blue';
imagehidden=false
}
else{
pic.hidden =true;
imagehidden=true
}
}

JavaScript addEventListener 'click''

I struggling with very basic thing
I am trying to make this side-nav appear and disappear with JavaScript. The code below only activates the nav bar but doesn't deactivate it. Tried all options but I don't know how to call function to close nav-bar.
Thank you
HTML
<div id="mySidenav" class="sidenav">
×
About
Services
Clients
Contact
</div>
<!-- Use any element to open the sidenav -->
<span id="MyElement">×</span>
JS
<script type="text/javascript">
function changeClass() {
document.getElementById("mySidenav").style.width = "250px";
}
window.onload = function() {
document.getElementById("MyElement").addEventListener('click',changeClass);
}
</script>
</body>
</html>
You can't have to objects with the same ID (use name instead?)
You have a typo in else if with comparator mark and another in the next line with assingment mark.
Since in menu.style.width == "-250px" you would be assigning value to -250 (menu.style.width == "0px) would never pass and it would keep assigning value -250 whenever someone clicks the button, but that fails, because you have a typo in your assingment mark.
Width cannot be negative
Is let compatable with your browser?
Have you considered using display:none and display:block (or whatever display you have)?
function toggleMenu() {
var menu = document.getElementById('mySidenav');
if (menu.style.display == "none")
menu.style.display = "inline-block"; //block
else
menu.style.display = "none";
}
window.onload = function() {
document.getElementById("MyElement").onclick = toggleMenu;
}
your else statement section seems to have the comparator (==) and assignment (=) the wrong way around :
} else if (menu.style.width = "250px") {
menu.style.width == "-250px";
}
looks like it should be
} else if (menu.style.width == "250px") {
//setting a negative width will immediately break the toggle logic.
//just set it to 0px.
menu.style.width = "0px";
}
Full example :
function changeClass() {
var sidenavElement = document.getElementById("mySidenav");
if(sidenavElement.style.width == "0px")
{
sidenavElement.style.width = "250px";
}
else
{
sidenavElement.style.width = "0px";
}
}
window.onload = function() {
document.getElementById("MyElement").addEventListener('click',changeClass);
}
#mySidenav
{
overflow:hidden;
height:100px;
background:green;
}
<div id="mySidenav" style="width:0px">
HELLO I AM SIDENAV
</div>
<button id="MyElement">toggle it</button>
There is many problem in your code, you have 2 elements inside your DOM with same ID as mentioned by Marek Maszay.
Your else statement should use == in condition and = for assignation.
Last thing, you should not use width property to display or not an element there is a display property in css
<html>
<body>
<div id="mySidenav" class="sidenav">
<span class="closebtn" id="MyElement">×</span>
<span id="menu">
About
Services
Clients
Contact
</span>
</div>
<!-- Use any element to open the sidenav -->
<span id="MyElement2">×</span>
<script type="text/javascript">
function toggleMenu() {
let menu = document.getElementById('menu');
if (menu.style.display == "") {
menu.style.display = "none";
} else if (menu.style.display == "none") {
menu.style.display = "";
}
}
window.onload = function() {
document.getElementById("MyElement").addEventListener('click',toggleMenu);
}
</script>
...
</body>
</html>
When display value is "", it take the default display value of an element, when its value is none the element is not displayed.
Here is your code modified.
EDIT
For some reason changing width to 0px doesn't hide the element. Element change from line to column, it seem that the browser try to fill element with content and put at least one word per line.
Seem like other people on web are having same problem.

How Do I Get A Div to Completely Clear When I Toggle?

I'm attempting to have a div that runs split screen. The left panel will have multiple links, so the simple toggle I am using is ineffective. I need to be able to clear out the right div and replace it with the next selected link. (Something similar to this
https://www.itriagehealth.com/conditions) Right now, it just stacks the selected links.
I realized I can't do this with CSS alone and am still playing with javascript, but this is the concept I have so far:
https://jsfiddle.net/od9bnez4/1/
function toggle_visibility(id)
{
var e = document.getElementById(id);
if (e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
That fiddle should work, there's just an error in your function declaration, missing the closing brace }, and then change the JavaScript execution (with the gear next to 'JavaScript') to run as a tag in the <head> or <body>, not sure why onLoad isn't working there.
Something like this will do the trick, https://jsfiddle.net/od9bnez4/3/
The heart of it is this,
var left = document.getElementById("left");
var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");
left.addEventListener('click', function() {
if (div1.style.display == "none") {
div1.style = "display: block;";
div2.style = "display: none;";
} else {
div1.style = "display: none;";
div2.style = "display: block;";
}
});
Obviously this only works for two elements and is very procedural. Typically someone would use something like jQuery for this, or even a framework like Angular or React to build a modularized component.
This is pretty easy. JQuery makes it more flexible.
<!DOCTYPE html>
<html>
<head>
<script>
function toggle()
{
var e = document.getElementById('diva');
var f = document.getElementById('divb');
if (f.style.display == 'none')
{
e.style.display = 'none';
f.style.display = 'block';
}
else
{
f.style.display = 'none';
e.style.display = 'block';
}
}
function togglejquery()
{
if ($('#divb').css('display') == 'none')
{
$('#diva').hide(); // or slideUp('fast');
$('#divb').show(); // or slideDown('fast');
}
else
{
$('#divb').hide();
$('#diva').show();
}
}
</script>
</head>
<body onload="positionScreenBottom();">
<div style="float:left; width:40%;">
<a href='#' onclick='toggle();'>Show A</a><br/>
<a href='#' onclick='toggle();'>Show B</a><br/>
</div>
<div style="float:left; width:60%;">
<div id='diva' style='float:left;'>Here is A</div>
<div id='divb' style='float:left; display:none;'>Here is B</div>
</div>
</body>
</html>

How to toggle div?

I searched around stack overflow and I tried just about every topic - none of them worked. I'm trying to toggle the "inventory" div to block instead of none after you click the button "btnTwo". How would you do this? This is my current code:
<script>
function one()
{
var newButton1 = '<button id="btnTwo" onclick="two()" >Pick up stick</button>';
var newButton2 = '<button id="btnThree" onclick="three()">Leave it there</button>';
document.getElementById("a").innerHTML = "You feel something on the ground, and you think it's a stick."+newButton1+newButton2;
var myButton = document.getElementById('btnOne');
myButton.onclick = four;
}
function two()
{
document.getElementById("b").innerHTML="You pick up the stick. It might be useful for something.";
document.getElementById("btnTwo").style.display = 'none';
document.getElementById("btnThree").style.display = 'none';
}
function three()
{
document.getElementById("c").innerHTML="You leave the stick on the ground and continue on.";
document.getElementById("btnTwo").style.display = 'none';
document.getElementById("btnThree").style.display = 'none';
}
function four()
{
document.getElementById("d").innerHTML="You feel a stick stuck to the wall with something like honey. Next to it is a few rocks.";
}
</script>
<div style="margin-left:15px; width:200px; margin-top:100px;">
<button id="btnOne" onclick="one()">Feel around the cave</button>
</div>
<div id="inventory" style="margin-left:255px; width:200px; height:600px; margin-top:-15px; display:none;">
Sticks:
<div id="stickNumber">1</div>
</div>
<div id="entire" style="margin-left:490px; margin-top:-22px; width:400px; height:600px;">
<div id="d"></div>
<div id="c"></div>
<div id="b"></div>
<div id="a"></div>
</div>
Change
function two()
{
document.getElementById("b").innerHTML="You pick up the stick. It might be useful for something.";
document.getElementById("btnTwo").style.display = 'none';
document.getElementById("btnThree").style.display = 'none';
}
to
function two()
{
document.getElementById("b").innerHTML="You pick up the stick. It might be useful for something.";
document.getElementById("btnTwo").style.display = 'none';
document.getElementById("btnThree").style.display = 'none';
document.getElementById("inventory").style.display = "block";
}
Updated example
Well. If you want to toggle something you just need to first check the state of the object, and apply the oposite of what is set.
var el = document.getElementById('el'); //some div
var bt = document.getElementById('bt'); // some button
el.style.display = "block";
bt.onclick = function(){
if(el.style.display == "block"){
el.style.display = "none";
}else{
el.style.display = "block";
}
}
Working fiddle
You could also use some library like for instance jquery where this would be as easy like:
$("#bt").click(function(){
$("#el").toggle();
})
Working fiddle
For your case, you just need to add below script into the bottom of function two():
document.getElementById("inventory").style.display = 'block';
I have test the code on safari and chrome.

Spot div on same position

I am trying to show hide image using javascript. Code works fine but image displays on different location. Now i want to show and hide the images on same spot.
<script type="text/javascript">
function showImage()
{
if(document.getElementById('check').checked==true)
{
document.getElementById("image").style.visibility = 'visible';
document.getElementById("images").style.visibility = 'hidden';
}
else if(document.getElementById('check').checked==false)
{
document.getElementById("image").style.visibility = 'hidden';
document.getElementById("images").style.visibility = 'visible';
}
}
</script>
<body onload="showImage()">
<font align="left">
<input type="checkbox" id="check" onclick="showImage()" />
Show Image
<div class="checkboxes" id = "image" >
<img class = "jive-image" height="125" src ="Tulips.jpg ">
</div>
<div id="images">
<img class = "jive-image" height="125" src="Desert.jpg">
</div>
</body>
How it possible?
If you use the display style you can remove the image from the page and not just hide it like visibility. This will mean the bottom image is pushed up as the first isn't taking up space any more. Set element.style.display to 'block' to show the element and 'none' to hide it.
jsFiddle
function showImage() {
if (document.getElementById('check').checked == true) {
document.getElementById("image").style.display = 'block';
document.getElementById("images").style.display = 'none';
} else if (document.getElementById('check').checked == false) {
document.getElementById("image").style.display = 'none';
document.getElementById("images").style.display = 'block';
}
}
It's because you're using visibility. CSS's visibility style doesn't affect the page flow. It's as if you were setting the opacity to 0. Instead, you may want to use display.
function showImage() {
if(document.getElementById('check').checked) {
document.getElementById("image").style.display = 'block';
document.getElementById("images").style.display = 'none';
} else {
document.getElementById("image").style.display = 'none';
document.getElementById("images").style.display = 'block';
}
};
Instead setting visibility, set display to either none or block.

Categories