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
Related
I've made a bunch of JavaScript functions to show, hide and populate various elements on a zooming menu. All seem to working except for one which I need the function to only run if a CSS setting is a specific value (width of 195%). I am very new to JavaScript so there may be more than one issue here.
<script>
function zoomShowF2() {
var widthNow = document.getElementById('svg1').style.width;
if widthNow = '195%' {
document.getElementById('zoomTitle').style.display = 'flex';
else
document.getElementById('zoomTitle').style.display = 'none';
}}</script>
You need to use comparison operators write the if statement as follows
if (widthNow == '195%') {
as the single = is assigning the value not comparing it
There are a few issues with your syntax:
function zoomShowF2() {
var widthNow = document.getElementById('svg1').style.width;
if (widthNow === '195%') {
document.getElementById('zoomTitle').style.display = 'flex';
} else {
document.getElementById('zoomTitle').style.display = 'none';
}
}
Thanks everyone. It works now with a combination of the changes suggested. I assume my curly braces are all in 'tidy' positions?
EDIT. I've adjusted the curly brace positions to as per Ed's layout.
Thanks all!
Your code does not called when the element changes it size or width. You must put all your code inside window.onresize event.
var displayOutput = document.getElementById("display-option");
function reportWindowSize() {
displayOutput.text = document.getElementById("element-to-check").style.width;
}
window.onresize = reportWindowSize;
<p id="element-to-check">Resize the browser window to fire the <code>resize</code> event.</p>
<p>Display: <span id="display-option"></span></p>
I'm currently making an iphone webapp and have almost finished it, I just need to fix this one little issue im having
Ive managed to hide one div layer and show another, but what I would like is for the same button to then show the layer I have hid and hide the one that I have shown when clicked again. So basically clicking the button would take it back to the original state
the code I am currently using is
<script type="text/javascript">
function toggle_layout(d)
{
var onediv = document.getElementById(d);
var divs=['Posts','Posts2'];
for (var i=0;i<divs.length;i++)
{
if (onediv != document.getElementById(divs[i]))
{
document.getElementById(divs[i]).style.display='none';
}
}
onediv.style.display = 'block';
}
</script>
It hides a div I have named "Posts" and shows a div I have named "Posts2", but clicking it again does not reverse the effect.
If you wanna take a look at my site its http://a-m-creativecapture.tumblr.com/
Will have to view it on a mobile to see what I am talking about.
Have you tried style.visibility (visible|hidden) instead of style.display?
Assuming that your divs are something like this:
<div id="posts"></div>
<div id="posts2"></div>
You can use the following code:
var posts = document.getElementById('posts'),
posts2 = document.getElementById('posts2');
function toggle() {
if (this == posts) {
posts.style.display = 'none';
posts2.style.display = 'block';
} else {
posts.style.display = 'block';
posts2.style.display = 'none';
}
}
div1.onclick = toggle;
div2.onclick = toggle;
I am trying to write a PHP Java Script, but struggling to write in this section of coding.
I am trying to make a buttom in form in that opens
The code I have written so far is
function display(e){
if (e.clicked)
document.getElementById('2').style.display = 'none';
else
document.getElementById('2').style.display = 'block';
and the FORM CODE is;
<input type="button" value=" Book Now " onClick="display(this)"/></input>
any help to point out my clear mistakes would be great, the live code can be seen at
http://affordablecleaners.co.uk/quote/
Thanks,
Henry
Try something similar to the following
var i = 0;
var display = function() {
document.getElementById('2').style.display = (i++ % 2) ? "none" : "block";
};
Essentially, we're creating a variable i and increasing it by one every time the function is called. If, when the function is called, i is an even number, then we set it to display: block. Otherwise, set it to display: none.
The biggest downside to this solution is cluttering the global scope. If this is an issue, you can also do the following.
var display = function() {
document.getElementById('2').style.display = (document.getElementById('2').style.display == "none") ? "block" : "none";
};
Here's the (untested) logic...
function display(state, which){
if (state==1) {document.getElementById(which).style.display ='none';}
else
{document.getElementById(which).style.display = 'block';}
}
and then in your button...
to turn ON
onclick="display('1',someDIV)"
to turn OFF
onclick="display('0',someDIV)"
I have my code set so when you click the picture switches, and then a menu pops up. (I haven't finished the menu yet). But when I click on the picture, it is not changing. Can you tell me how to fix my code thanks.
I can't get jsfiddle to work so here is my website http://spencedesign.netau.net/singaporehomemenu.html
And the troubling code is:
function showMore() {
if (more.style.display != "none") {
more.style.display = "none";
}
else {
more.style.display = "block";
}
}
imgs = Array("more.png", "less.png");
var x = 0;
function change() {
document.getElementById("bob").src = imgs[++x];
if (x == 1) {
x = -1;
}
}
if (!imgs[x + 1]) {
x = -1;
}
JSFiddle
(yes I have all of the appropriate body and html tags, I just thought it wasn't needed to demonstrate my problem) Thanks for your time!
Your problem is that you don't have an ID called bob. So when you try to call:
document.getElementById("bob") ...
This is null.
You need to set the image you want to change to have an id called bob (Why you've called it bob though?)
As Lee said, you missed giving an ID to the img. Also, you closed your change() function a little early, so it would never get to the second if.
function change() {
document.getElementById("bob").src = imgs[++x];
if (x == 1) {
x = -1;
}
//} Moved from here
if (!imgs[x + 1]) {
x = -1;
}
}
working here: edited jsfiddle
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';
}