Develop Reference

javascript/htmlDOM display element while hiding the others

So I have written this clickDisplay function that displays certain elements on click, it works fine, yes, but obviously I needed a feature that would hide all the other elements, because they are supposed to be displayed in the same field, so right now they kind stack on top of eachother
this is what I came up with, but it sorta doesn't work and I don't know why
const pages = ['watch','chars','seasons','songs']
function clickHide(element){
document.getElementById(element).style.display = 'none';
}
function clickDisplay(element){
document.getElementById(element).style.display = 'block';
for(let x = 0 ; x < pages.length ; x++){
if (pages[x]!=element){clickHide(pages[x]);}
}
}

While it sounds like you solved your own problem, I started putting together code before you posted, so I'll throw it up here for you. :)
const pages = ['watch', 'chars', 'seasons', 'songs']
function clickHide (el) {
pages.forEach((pel) => {
setElement(pel, pel === el ? 'none' : 'block')
})
}
function setElement(el, attr) {
document.getElementById(el).style.display = attr
}
with the html having this:
onclick="clickHide('watch')" // or 'chars' 'seasons' or 'songs'

Oh wait, I don't know why but this suddenly works now. I only changed the placeholder text and refreshed the page
But I'm sure that this still is a stupid solution

Javascript: change z-index onclick

I have seen questions similar to this one but not quite on point. I just want to do something really simple: when button 1 is clicked, it should hide and button 2 should appear; and then when button 2 is clicked, button 2 should hide and button 1 should show.
I am trying to do this by modifying the z-index, however it is not working.
This is the code I am using to do it:
if (attacker == player 1) {
document.getElementById("p1-play").style.zIndex = -1;
document.getElementById("p2-play").style.zIndex = 1;
}
else {
document.getElementById(p2-play).style.zIndex = -1;
document.getElementById(p1-play).style.zIndex = 1;
}
where p1-play is button 1 and p2-play is button 2

It would be better to use display:
var p1Play = document.getElementById("p1-play");
var p2Play = document.getElementById("p2-play");
if (attacker == player1) {
p1Play.style.display = 'none';
p2Play.style.display = 'block';
}
else {
p1Play.style.display = 'block';
p2Play.style.display = 'none';
}

jQuery: Storing a Div name in a variable, then calling it in an action

So i've been trying to wrap my head around this, all i'm trying to do is store a div name in a variable for easy editing, then allow it to be called in standard actions such as show/hide.
Without the variables, my code works fine but with them it will not load the div, i've done a console log to make sure it knows what the div name is based off the stored variable and it returns correctly.
Here is my code:-
var buttonActive = 0;
var yourMenuDiv = '.menu-menu-1-container';
$(function() {
$(yourMenuDiv).before('<div class="responsiveButton"><div id="rBBar"></div><div id="rBBar"></div><div id="rBBar"></div></div>');
$(yourMenuDiv).before('<div class="responsiveMenu"><div id="responsiveTitle"></div></div>');
$(yourMenuDiv + 'ul').clone().appendTo('.responsiveMenu');
$('.home #logoImage').clone().appendTo('#responsiveTitle');
console.log(yourMenuDiv);
$(window).resize(function() {
if ($(window).width() < 600) {
$(yourMenuDiv).hide();
$('.responsiveMenu, .responsiveButton').show();
}else{
$('.responsiveMenu').removeClass('expandMenu');
$('.responsiveButton').removeClass('expandMenuButton');
$('.responsiveMenu, .responsiveButton').hide();
$(yourMenuDiv).show();
buttonActive = 0;
}
});
$(function() {
if ($(window).width() < 600) {
$(yourMenuDiv).hide();
$('.responsiveMenu, .responsiveButton').show();
}else{
$('.responsiveMenu, .responsiveButton').hide();
$(yourMenuDiv).show();
buttonActive = 0;
}
});
$('.responsiveButton').click(function() {
if (buttonActive == 0){
$('.responsiveMenu').addClass('expandMenu');
$('.responsiveButton').addClass('expandMenuButton');
buttonActive = 1;
}else{
$('.responsiveMenu').removeClass('expandMenu');
$('.responsiveButton').removeClass('expandMenuButton');
buttonActive = 0;
}
});
});
Thank you

You should try something like:
var yourMenuDiv = $('.menu-menu-1-container');
and then just call the methods with: yourMenuDiv.methodHere.

In your code:
$(yourMenuDiv + 'ul').clone().appendTo('.responsiveMenu');
Does the above line work correctly? - I mean should there be a space character in between. Something like below:
$(yourMenuDiv + ' ul').clone().appendTo('.responsiveMenu');
and as a matter of interest. Does it make any difference if you place your first two lines of code:
var buttonActive = 0;
var yourMenuDiv = '.menu-menu-1-container';
after $(function() { ?

Stop javascript redirection on href="javascript:void"

I've been using a script which prefixes redirect.php on "onmouseevent" triggers. But I don't want it on certain sites, like google etc. Please see the code below:
var matchavailable = 0;
var disallowinks = "google,microsoft,yahoo";
$n("a").mousedown(function () {
var linkArray = disallowlinks.split(',');
for (var i = 0; i < linkArray.length; i++) {
if ($n(this).attr('href').indexOf(linkArray[i]) > 0) {
matchavailable = 1;
break;
}
else {
matchavailable = 0;
}
}
if (matchavailable == 0) {
if ($n(this).hasClass('linked')) {
}
else
{
$n(this).attr('href', "http://yoursite.com/redirect.php?q=" + encodeURIComponent($n(this).attr('href')));
$n(this).attr('target', '_blank');
$n(this).addClass("linked");
}
}
});
The javascript runs so far so good on all anchor tags. Just that, I have a popup which I show on my website and when I try to close the popup (X marks the spot), the redirect.php gets prefixed on that as well.
So my question is, how do we disallow the script to NOT run on anchor tags with the value starting with "javascript" ?
For example, i don't want it to run on:
<a href="javascript:void"> or <a href="any random parameter">
How do I go about this? WOuld be great to get some help

Javascript if/else statement using image src as condition

I have a voting script with an arrow system (upvotes and downvotes).If user clicks upvote, the arrow changes to the green arrow, meaning vote registered. If they click again, I want the arrow to revert back to the original image. However, using my code, it changes the image on the first like, but doesn't revert back on a second click.
if (like.src = 'vote_triangle.png') {
like.src = 'vote_triangle_like.png';
} else {
like.src = 'vote_triangle.png';
}

Use a more lenient if statement like:
if (like.src.indexOf('vote_triangle.png')!=-1) {
like.src = 'vote_triangle_like.png';
} else {
like.src = 'vote_triangle.png';
}

I know it's a very old thread, but I would like to add my findings here for future reference.
I found the following code wasn't working:
function swapImage() {
var element = document.getElementById("myImage");
if (element.src == "image1.png") {
element.src = "image2.png";
} else {
element.src = "image1.png"
}
}
Showing alerts containing the element.src taught me it contained the full path to the image in my local machine. Thus, the if statement had been always evaluated to false.
To fix that in a logical manner, what I did was get the attribute of the element, as the following code shows.
function swapImage() {
var element = document.getElementById("myImage");
if (element.getAttribute("src") == "image1.png") {
element.src = "image2.png";
} else {
element.src = "image1.png";
}
}
By using the function getAttribute("attributeName"), I was able to retrieve the path contained in the src relatively to the project directory.

I would suggest, instead of using img soruce as conditional statement, use a global variable, change its state once the upvote is clicked by say +1 and for downvotes -1.
//when 0, show upvote image, make it a global by declaring before any function
var UpVote = 0;
//when upvote clicked, when greater than 0, show down vote img
UpVote = UpVote +1 ;
//conditional logic for img source
if(UpVote > 0){
like.src = 'vote_triangle.png';
}
else{
like.src = 'vote_triangle_like.png';
}