Can anyone please help me to resolve this Javascript issue:
I need to show few div component based on the current website's hostname and need to do this only during the initial load of the Page. I've developed a Javascript code for this but unable to show/hide div components in the desired manner.
The following Javascript code always gives an "Uncaught SyntaxError: Unexpected token else" Error on the console.
<html>
<head>
<script>
var hostName = window.location.host;
var div1 = document.getElementById('iframePortal');
var div2 = document.getElementById('iframeNormal');
If(String(hostName).indexOf('w3schools') !== -1)
{
document.getElementById('iframePortal').style.display = 'block';
document.getElementById('iframeNormal').style.display = 'none';
}
else {
document.getElementById('iframePortal').style.display = 'none';
document.getElementById('iframeNormal').style.display = 'block';
}
</script>
</head>
<body>
<div id="iframeNormal">
some text 1
</div>
<div id="iframePortal">
another 1
</div>
</body>
</html>
use if instead of If like this
if(hostName.indexOf('w3schools') !== -1)
First thing is js is case sensitive as they told you. 2nd thing is you are trying to access the elements before they are fully loaded. Modify your code to:
<html>
<head>
</head>
<body>
<div id="iframeNormal">
some text 1
</div>
<div id="iframePortal">
another 1
</div>
<script>
var hostName = window.location.host;
var div1 = document.getElementById('iframePortal');
var div2 = document.getElementById('iframeNormal');
if(String(hostName).indexOf('w3schools') !== -1)
{
document.getElementById('iframePortal').style.display = 'block';
document.getElementById('iframeNormal').style.display = 'none';
}
else {
document.getElementById('iframePortal').style.display = 'none';
document.getElementById('iframeNormal').style.display = 'block';
}
</script>
</body>
</html>
You have "I" letter in uppercase -> replace it with "i"... so, should be 'if'.
I would use window.location.hostname instead of window.location.host,
also typeof(window.location.hostname) return 'string' so you don't need to wrap hostname in if statement with String
<script>
var div1 = document.getElementById('iframePortal');
var div2 = document.getElementById('iframeNormal');
if(window.location.hostname.indexOf('w3schools') >= 0){
div1.style.display = 'block';
div2.style.display = 'none';
}else{
div1.style.display = 'none';
div2.style.display = 'block';
}
</script>
Here is a working jsFiddle: http://jsfiddle.net/rsFPF/
I had to use some css too. Please give it a try.
Don't use jsFiddle? Below is the code:
Html:
<div id='iframeNormal' class='iframes'> some text 1 </div>
<div id='iframePortal' class='iframes'> another 1 </div>
CSS:
.iframes
{
display: none;
}
javascript:
var div1 = document.getElementById('iframeNormal');
var div2 = document.getElementById('iframePortal');
if (window.location.host.indexOf('w3schools') !== -1)
{
div1.style.display = 'block';
}
else
{
div2.style.display = 'block';
}
Related
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>
I've got this code working for one referrer (twitter) but how do I amend so if there was from twitter and facebook and further how do I amend to be exact root domain eg from only checking t.co to t.co/s9NHw3
<script>
console.log(document.referrer);
console.log(document.referrer.split('/')[2]);
if (document.referrer.split('/')[2] === 't.co') {
document.getElementById('imagebanner').style.display = 'block';
document.getElementById('others').style.display = 'none';
} else {
document.getElementById('imagebanner').style.display = 'none';
document.getElementById('others').style.display = 'block';
}
</script>
Example of what I have tried:
<script>
console.log(document.referrer);
console.log(document.referrer.split('/')[2]);
if (document.referrer.split('/')[2] === 't.co/s9NHw3','facebook.com') {
document.getElementById('imagebanner').style.display = 'block';
document.getElementById('others').style.display = 'none';
} else {
document.getElementById('imagebanner').style.display = 'none';
document.getElementById('others').style.display = 'block';
}
</script>
Edited question. Please see issue below in comments. I am now looking want to look at tag only in url (not even root url) and then show either div one if it has tag in url (example bing.com/eu9jdi9 or google.com/eu9jdi9 - where eu9jdi9 is the tag - would like to use multiple tags so will try || again) or div two if it hasn't.
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>
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.
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.