Alter Header Label for Show/Hide Javascript - javascript

http://jsfiddle.net/YaMhn/8/
^^^^Take a look and see if you can help solve this
Ok so I added the label showhide to my script
function showHide(lbl)
{
if(document.getElementById('mydiv').style.display == "none")
{
lbl.innerHTML="Hide";
document.getElementById('mydiv').style.display="";
}
else
{
lbl.innerHTML="Show";
document.getElementById('mydiv').style.display="none";
}
}
function showhide(id) {
if (document.getElementById) {
obj = document.getElementById(id);
if (obj.style.display == "") {
obj.style.display = "none";
} else {
obj.style.display = "";
}
}
}
function hide(id) {
if (document.getElementById) {
obj = document.getElementById(id);
if (obj.style.display == "none") {
obj.style.display = "none";
} else {
obj.style.display = "none";
}
}
}
function hideall(id1,id2,id3,id4) {
var status1 = document.getElementById(id1).style.display;
var status2 = document.getElementById(id2).style.display;
var status3 = document.getElementById(id3).style.display;
var status4 = document.getElementById(id4).style.display;
if ((status1 == 'none') || (status2 == 'none') || (status3 = 'none') || (status4 = 'none')) {
hide(id1); hide(id2); hide(id3); hide(id4); return;
}
if ((status1 != 'none') || (status2 != 'none') || (status3 != 'none') || (status4 != 'none')) {
hide(id1); hide(id2); hide(id3); hide(id4); return;
}
}
function show(id) {
if (document.getElementById) {
obj = document.getElementById(id);
if (obj.style.display == "") {
obj.style.display = "";
} else {
obj.style.display = "";
}
}
}
function showall(id1,id2,id3, id4) {
var status1 = document.getElementById(id1).style.display;
var status2 = document.getElementById(id2).style.display;
var status3 = document.getElementById(id3).style.display;
var status4 = document.getElementById(id4).style.display;
if ((status1 == 'none') || (status2 == 'none') || (status3 = 'none') || (status4 = 'none')) {
show(id1); show(id2); show(id3); show(id4); return;
}
if ((status1 != 'none') || (status2 != 'none') || (status3 != 'none') || (status4 != 'none')) {
show(id1); show(id2); show(id3); show(id4); return;
}
}
Here is my Header code:
Header #1: (titled Runway Information Click to Expand/Close)
<div style="background-color:black; width:80%; cursor:pointer;hand" onClick="showhide('id1'); return(false);"><table width="100%"><tr><td width=80% align=left><font color="white" size="4"><strong> Runway Information</strong></font></td><td align=right><div id='mydiv' style='display:none'></div></td></tr></table></div>
The Header works prefectly, shows and hides just as I coded. But I want it to say "Show" when hidden and "Hide" when shown.
Previously it was written like this:
Click to Expand/Close
The problem is the new showHide(lbl) does not work as intended.
What do I need to change?

It is simple -- use innerHTML:
style.display="block"
innerHTML="click here to expand"
and to hide:
style.display="hide"
innerHTML="click here to close"

The only change I made was else to else if, and it is now fixed.
http://jsfiddle.net/YaMhn/18/
Thank You Ashraf for the help. I would upvote you but I only have a 13 rep lol.

I made you an example : http://jsfiddle.net/YaMhn/

Related

Else condition is not working in javascript

I'm a beginner to JavaScript. Can someone help me in this regard?
In the below code the logic for submit button doesn't work. _btn.addEventListener. Only the if part is getting executed, some issue with the else part condition. If the "if" condition gets satisfied then the alert is getting executed and not the conditions in else part even if the date and image is clicked.
<p align=center>
<input type="submit" value="submit" id="button">
</p>
<script type="text/javascript">
let _img = document.getElementById("img");
let _img1 = document.getElementById("img1");
let _img2 = document.getElementById("img2");
let _picker = document.getElementById("picker");
let _btn = document.getElementById("button");
let isImgClicked = false;
let isDatePicked = false;
/*let ImgClicked = '_img';
let ImgClicked1 = '_img1';
let ImgClicked2 = '_img2';
let DatePicked = '2019';
let DatePicked1 = '2020';*/
_img.addEventListener("click", function(){
isImgClicked = true;
ImgClicked=true
});
/*_img1.addEventListener("click", function(){
ImgClicked1 = true;
});
_img2.addEventListener("click", function(){
ImgClicked2 = true;
}); */
_picker.addEventListener("click", function(){
isDatePicked = true;
});
_btn.addEventListener("click", function(){
if(!isImgClicked || !isDatePicked)
{
alert("select the Year and Click the car image");
}
else
{
if((isImgClicked == "_img") && (isDatePicked == "DatePicked"))
{
window.location.replace("sample1.html");
}
else if((isImgClicked == "_img") && (isDatePicked == "DatePicked1"))
{
window.location.replace("sample2.html");
}
else
{
if((isImgClicked == "_img1") && (isDatePicked == "DatePicked"))
{
window.location.replace("sample3.html");
}
else if((isImgClicked == "_img1") && (isDatePicked == "DatePicked1"))
{
window.location.replace("sample4.html");
}
else
{
alert("!!!!");
}
}
}
});
</script>
Here you are assigning isImgClicked = true and ImgClicked = true
img.addEventListener("click", function(){
isImgClicked = true;
ImgClicked=true
});
But you are comparing this boolean with strings. Why?
if((isImgClicked == "_img1") && (isDatePicked == "DatePicked1"))
Fix it.
This is your function re-written in early-return style:
function() {
if(!isImgClicked || !isDatePicked) {
alert("select the Year and Click the car image");
return
}
if((isImgClicked == "_img") && (isDatePicked == "DatePicked")) {
window.location.replace("sample1.html");
return
}
if((isImgClicked == "_img") && (isDatePicked == "DatePicked1")) {
window.location.replace("sample2.html");
return
}
if((isImgClicked == "_img1") && (isDatePicked == "DatePicked")) {
window.location.replace("sample3.html");
return
}
if((isImgClicked == "_img1") && (isDatePicked == "DatePicked1")) {
window.location.replace("sample4.html");
return
}
alert("!!!!");
}
Which if statement are you having a problem with?

How to make certain part of an background image clickable

I have a Homepage Takover running on our website. and I have already written code for displaying the image as background image and it is clickable.
But I need certain part of image needs to clickable to another URL.
<!DOCTYPE html>
<html>
<head>
<title>asdfasdf</title>
</head>
<body>
<div>
<script>
if (top == self) {
var interWindow = window;
var interDoc = window.document;
} else {
try {
var interWindow = window.parent;
var interDoc = window.parent.document;
} catch (e) {
/* The creative cannot escape the iframe. Show an appropriate alternative. The alternative will remain inside of the iframe. */
}
}
var timeDelay = 0;
var backgroundColor = '#ffffff';
function initBackground() {
high = window.screen.height;
size = window.screen.width;
if (size <= 1280) {
interDoc.body.style.backgroundImage = none;
} else if (size > 1280 && size < 1440) {
interDoc.body.style.backgroundImage = "url(https://i.ibb.co/L9hnZJ1/hpto.gif)";
} else {
interDoc.body.style.backgroundImage = "url(https://i.ibb.co/L9hnZJ1/hpto.gif)";
}
if (backgroundColor != '') {
interDoc.body.style.backgroundColor = backgroundColor;
}
interDoc.body.style.backgroundRepeat = 'no-repeat';
interDoc.body.style.backgroundPosition = 'top center';
interDoc.body.style.backgroundAttachment = 'fixed';
interDoc.onclick = backGroundClick;
}
var backGroundClick = function (e) {
if (document.all) {
if (event.button == 2 || event.button == 3) {
return false;
}
} else {
if (e.button == 2 || e.button == 3) {
e.preventDefault();
e.stopPropagation();
return false;
}
}
var link = 'google.com';
EE = e ? e : event;
if (!EE) {
return;
}
var t = EE.target ? EE.target : EE.srcElement;
if (t.tagName == "BODY" || t.tagName == "HTML" || t.tagName == "HEADER" || t.tagName == "SECTION" || t.tagName == "FOOTER") {
var ad = window.open("" + link);
} else {
console.log('link click event: ' + t.tagName);
}
}
interDoc.onmouseover = function (e) {
EE = e ? e : event;
if (!EE)
return;
var t = EE.target ? EE.target : EE.srcElement;
if (t.tagName == "BODY" || t.tagName == "HTML" || t.tagName == "HEADER" || t.tagName == "SECTION" || t.tagName == "FOOTER") {
interDoc.body.parentNode.style.cursor = 'pointer';
} else {
interDoc.body.parentNode.style.cursor = 'auto';
}
}
window.setTimeout("initBackground();", timeDelay);
</script>
</div>
</body>
</html>
The Red highlited part in the background image needs to redirect to another URL when onclick.

javascript, Display text when pusing button (multiple buttons) but only one text at the time

I'm using this javascript to display text when clicking a button in a website:
<script type="text/javascript">
function toggleMe(a)
{
var e=document.getElementById(a);
if(!e)return true;
if(e.style.display=="none")
{e.style.display="block"}
else
{e.style.display="none"}
return true;
}
</script>
and i'm calling the script with <A Onclick="return toggleMe('content')" >[Website Content]</A>
The problem is that i have three "buttons" (help, gpgkey, content) and i would like that only one text be displayed at the time. I've never done java before and Im not even sure of totally understanding the first code.
This is one of my attempts
<script type="text/javascript">
function toggleMe(a)
{
var e=document.getElementById(a);
if(!e)return true;
if(e==document.getElementById("content")
{
var f=document.getElementById("help");
var g=document.getElementById("gpgkey");
}
if(e==document.getElementById("help")
{
var f=document.getElementById("content");
var g=document.getElementById("gpgkey");
}
if(e==document.getElementById("gpgkey")
{
var f=document.getElementById("content");
var g=document.getElementById("help");
}
if(e.style.display=="none")
{
e.style.display="block"
if(f.style.display!="none")
{f.style.display="none"}
if(g.style.display!="none")
{g.style.display="none"}
}
else
{e.style.display="none"}
return true;
}
function toggleMe(a) {
var eContent = document.getElementById("content"),
eHelp = document.getElementById("help"),
eGPGKey = document.getElementById("gpgkey");
if(!eContent || !eHelp || !eGPGKey)
return;
if (a === "content" && eContent.style.display === "none") {
eContent.style.display = "block";
eHelp.style.display = "none";
eGPGKey.style.display = "none";
}
else if (a === "help" && eHelp.style.display === "none") {
eContent.style.display = "none";
eHelp.style.display = "block";
eGPGKey.style.display = "none";
}
else if (a === "gpgkey" && eGPGKey.style.display === "none") {
eContent.style.display = "none";
eHelp.style.display = "none";
eGPGKey.style.display = "block";
}
else if (a === "content") {
eContent.style.display = "none";
}
else if (a === "help") {
eHelp.style.display = "none";
}
else if (a === "gpgkey") {
eGPGKey.style.display = "none";
}
}
http://jsfiddle.net/Z68p7/

multiple functions onclick addeventlistener

I have the following code that works when triggered by an onclick for example: onClick="change('imgA');"
function change(v) {
var target = document.getElementById("target");
if (v == "imgA") {
target.className = "cast1";
} else if (v == "imgB") {
target.className = "cast2";
} else if (v == "imgC") {
target.className = "cast3";
} else if (v == "imgD") {
target.className = "cast4";
} else {
target.className = "chart";
}
}
as soon as this result is stored to the id 'target', How do I perform this same function again but with different classNames ('bio1' instead of 'cast1', etc). then save the results to a different id?
Everytime I've tried hasn't worked to this point.
You could try:
function change(v, id) {
var areas;
if( id == 'target' ) {
areas = 'cast';
} else {
areas = 'bio';
}
var target = document.getElementById(id);
if (v == "imgA") {target.className = areas+"1";}
else if (v == "imgB") {target.className = areas+"2";}
else if (v == "imgC") {target.className = areas+"3";}
else if (v == "imgD") {target.className = areas+"4";}
else {target.className = "chart";}
}

Show specific div based on url

I need to show a particular div when a button is clicked, only if the url is on a certain members profile. If its not on a profile page show another div that will display an error message. I have written it out extra long because I'm not that great at javascript. I'm having 2 problems with the code below:
1) only the first url will show the correct div not the url after the or (||)?
2) the else code that should show the error message shows up no matter what page you're on?
Please help.
function showdiv() {
if ((window.location.href == "http://google.com/profile/AA") || (window.location.href == "http://google.com/profile/AA/?xg_source=profiles_memberList")) {
document.getElementById('AA').style.display = 'block';
if (document.getElementById('AA').style.display == 'none') document.getElementById('AA').style.display = 'block';
else document.getElementById('AA').style.display = 'block';
}
if ((window.location.href == "http://google.com/profile/BB") || (window.location.href == "http://google.com/profile/BB/?xg_source=profiles_memberList")) {
document.getElementById('BB').style.display = 'block';
if (document.getElementById('BB').style.display == 'none') document.getElementById('BB').style.display = 'block';
else document.getElementById('BB').style.display = 'block';
}
if ((window.location.href == "http://google.com/profile/CC") || (window.location.href == "http://google.com/profile/CC/?xg_source=profiles_memberList")) {
document.getElementById('CC').style.display = 'block';
if (document.getElementById('CC').style.display == 'none') document.getElementById('CC').style.display = 'block';
else document.getElementById('CC').style.display = 'block';
}
if ((window.location.href == "http://google.com/profile/DD") || (window.location.href == "http://google.com/profile/DD/?xg_source=profiles_memberList")) {
document.getElementById('DD').style.display = 'block';
if (document.getElementById('DD').style.display == 'none') document.getElementById('DD').style.display = 'block';
else document.getElementById('DD').style.display = 'block';
}
if ((window.location.href == "http://google.com/profile/EE") || (window.location.href == "http://google.com/profile/EE/?xg_source=profiles_memberList")) {
document.getElementById('EE').style.display = 'block';
if (document.getElementById('EE').style.display == 'none') document.getElementById('EE').style.display = 'block';
else document.getElementById('EE').style.display = 'block';
}
if ((window.location.href == "http://google.com/profile/FF") || (window.location.href == "http://google.com/profile/FF/?xg_source=profiles_memberList")) {
document.getElementById('FF').style.display = 'block';
if (document.getElementById('FF').style.display == 'none') document.getElementById('FF').style.display = 'block';
else document.getElementById('FF').style.display = 'block';
}
else {
document.getElementById('error').style.display = 'block';
if (document.getElementById('error').style.display == 'none') document.getElementById('error').style.display = 'block';
else document.getElementById('error').style.display = 'block';
}
}
That code will be a nightmare to maintain. You might have better luck structuring it more like this:
function getId() {
var href = window.location.href;
if (href.indexOf('?') != -1) {
//remove any url parameters
href = href.substring(0, href.indexOf('?'));
}
if (href.charAt(href.length - 1) == '/') {
//check for a trailing '/', and remove it if necessary
href = href.substring(0, href.length - 1);
}
var parts = href.split("/");
return parts[parts.length - 1]; //last array element should contain the id
}
function showdiv(){
var id = getId();
var elem = document.getElementById(id);
if (elem) {
if (elem.style.display == 'none') {
elem.style.display = 'block';
}
else {
elem.style.display = 'none';
}
}
else {
if (document.getElementById('error').style.display == 'none') {
document.getElementById('error').style.display='block';
}
else {
document.getElementById('error').style.display='none';
}
}
}
You should work out the logic first.
This code makes no sense at all.
document.getElementById('AA').style.display = 'block';
if (document.getElementById('AA').style.display == 'none') {
document.getElementById('AA').style.display = 'block';
}
else {
document.getElementById('AA').style.display = 'block';
}
Structurally, it is similar to this code (simplified and with comments)
var a = 'block';
// this if will never be true, because we just set a to "block"
if (a == 'none') {
a = 'block';
}
// this else will always execute and set a to "block" again.
// something that was already done in the first line.
else {
a = 'block';
}
Also try to factor our the repeating parts of your code as #aroth has nicely demonstrated.

Categories

Resources