Javascript style display not working - javascript

function insert()
{
var linkElement = document.getElementById("BackButton");
var linkElementLnk = document.getElementById("BackButtonlnk");
var loc_array = document.location.href.split('/');
if (loc_array[loc_array.length-3] == "m")
{
linkElementLink.style.display = 'none';
}
else if (loc_array[loc_array.length-2] == "maps"
|| loc_array[loc_array.length-3] == "maps"
|| loc_array[loc_array.length-2] == "stations"
|| loc_array[loc_array.length-3] == "stations" )
{
var newT = document.createTextNode("Stations & Maps");
}
else
{
var newT = document.createTextNode(unescape(capWords(loc_array[loc_array.length-3])));
}
linkElement.appendChild(newT);
}
and here is my HTML
<a id="BackButtonlnk" href="#" class="white" onClick="history.go(-1); return false;">
<div id="BackButton1"></div>
<div id="BackButton"></div>
<div id="BackButton3"></div>
</a>
The style.display none is not working and seems to just be breaking the script. Am I missing something?

check your spelling
var linkElementLnk = document.getElementById("BackButtonlnk");
...
linkElementLink.style.display = 'none';

Related

Toogle between multiple variables does not work?

I want a toggle between font style. For example: If fontstyle does not exist in an element or if it is italic or oblique to insert normal, if it is normal to remove fontstyle after clicking on normal button.
I tried to solve this by inserting more variables in if (a || b|| c), but it doesn't work? Is this the correct way and is this possible or am I wrong somewhere in the code?
<div id="fontstyle">font-style</div>
<button onclick="ElementTextStyleNormal()">Normal</button>
<button onclick="ElementTextItalic()">Italic</button>
<button onclick="ElementTextOblique()">Oblique</button>
function ElementTextStyleNormal(){
var x = document.getElementById("fontstyle").style.fontStyle;
if (!(x == "" || x == "italic" || x == "oblique")) {
document.getElementById("fontstyle").style.fontStyle = "normal";
}
else if (x == "normal") {
document.getElementById("fontstyle").style.fontStyle = "";
}
}
function ElementTextItalic(){
var x = document.getElementById("fontstyle").style.fontStyle;
if (!((x == '') || (x == 'normal') || (x == 'oblique'))) {
document.getElementById("fontstyle").style.fontStyle = "italic";
}
else if (x == "italic") {
document.getElementById("fontstyle").style.fontStyle = "";
}
}
function ElementTextOblique(){
var x = document.getElementById("fontstyle").style.fontStyle;
if (!((x == '') || (x == 'normal') || (x == 'italic'))) {
document.getElementById("fontstyle").style.fontStyle = "oblique";
}
else if (x == "oblique") {
document.getElementById("fontstyle").style.fontStyle = "";
}
}
Try to simplify this by using a single function and the passing in the styleName as function parameter.
function ElementTextStyle(styleName){
var elem = document.getElementById("fontstyle");
elem.style.fontStyle = elem.style.fontStyle === styleName ? "" : styleName;
}
<div id="fontstyle">font-style</div>
<button onclick="ElementTextStyle('normal')">Normal</button>
<button name="italic" onclick="ElementTextStyle('italic')">Italic</button>
<button name="oblique" onclick="ElementTextStyle('oblique')">Oblique</button>

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 show and hide a div using javascript without calling any function?

I want to show and hide a div based on a condition. Please help me do this.
This my code:
<script>
var shad = '{SUBJECT}';
if (shad != "") {
document.getElementById("subjectr").style.display = 'none';
} else {
document.getElementById("subjectr").style.display = 'show';
}
</script>
<div id="subjectr">
sub
<input type="text" name="subjectr">
</div>
Try the following:
var shad ='SUBJECT';
if (shad !="") {
document.getElementById("subjectr").style.display = 'none';
}
else {
document.getElementById("subjectr").style.display = 'block';
}
sub: <input type="text" name="subjectr" id="subjectr" value='SUBJECT'/>
var shad ='SUBJECT';
if (shad != "") {
document.getElementById("subjectr").style.display = 'none';
} else {
document.getElementById("subjectr").style.display = 'block';
}

How do I assure the visibility of at least one element when randomly calling a function with javascript?

I have a function to randomly select the visibility of an html element by its id. I call the function two time on one elements, hence it may appear, that both elements are invisible. I want to avoid having none of both display. I've tried it with a separate function and also by modifying my random function.
Here is my code:
function turn_visible(id) {
var e = document.getElementById(id);
if (e.style.display == 'hidden') e.style.display = 'block';
else e.style.display = 'block';
}
function in_visible(id) {
var e = document.getElementById(id);
if (e.style.display == 'block') e.style.display = 'none';
else e.style.display = 'none';
}
function random_vis(id, id) {
var func = randomFrom([turn_visible, in_visible]);
(func)(id);
}
function randomFrom(array) {
return array[Math.floor(Math.random() * array.length)];
}
Here is how I try to check the visibility:
function check_visible(id1, id2) {
var e1 = document.getElementById(id1);
var e2 = document.getElementById(id2);
if ((e1.style.display == 'hidden'), (e2.style.display == 'hidden')) {
var func = randomFrom([turn_visible(id1), in_visible(id2)]);
(func)(id1, id2);
}
}
This is how I use the function in the html markup:
<a href="#page1" onclick="random_vis('rap-1812-1');
random_vis('rap-1857-1');
check_visible('rap-1812-1','rap-1857-1')">
</a>
The below code is functioning on Chrome and Firefox
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> </title>
</head>
<body>
<div id="rap-1812-1" style="display : block;">This is div rap-1812-1</div>
<br>
<div id="rap-1857-1" style="display : block;">This is div rap-1857-1</div>
<br>
<a href="#page1" onclick="random_vis('rap-1812-1');
random_vis('rap-1857-1');
check_visible('rap-1812-1','rap-1857-1')">
Click Here!
</a>
</body>
<script>
function turn_visible(id) {
var e = document.getElementById(id);
if (e.style.display == 'none') e.style.display = 'block';
}
function in_visible(id) {
var e = document.getElementById(id);
if (e.style.display == 'block') e.style.display = 'none';
}
function random_vis(id) {
var func = randomFrom([turn_visible, in_visible]);
(func)(id);
}
function randomFrom(array) {
return array[Math.floor(Math.random() * array.length)];
}
function check_visible(id1, id2) {
var e1 = document.getElementById(id1);
var e2 = document.getElementById(id2);
if ((e1.style.display == 'none') && (e2.style.display == 'none')) {
var toShow = Math.floor(Math.random() * 2);
turn_visible(arguments[toShow]);
}
}
</script>
</html>
var invisibleId = ""; // both are visible!
function in_visible(id) {
// Check if one is already invisible and turn on, if not the same as id
if (invisibleId != id && invisibleId !== "") {
turn_visible(invisibleId);
}
invisibleId = id;
...
}

Alter Header Label for Show/Hide 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/

Categories

Resources