I have an issue with my onclick event. I want to have a sub-menu within my page. I have 5 icons on my page. when I click on one icon, the other 4 icons disappear. when the 4 icons disappear, there will show up an couple of buttons to go to other pages.
my problem with this event is that the other buttons, don't show up. and i do not know what the problem is...
I made a video to show the problem;
https://youtu.be/F2NUj3KVIIk
my code;
<div id="column">
<p id="afbeelding-spiraal">
<img width="150" id="spiraal" src="https://www.spiralex.nl/wp-content/uploads/2020/12/spiraal-correct.png">
</p>
</div>
<div id="column">
<p id="afbeelding-plaat">
<img width="150" id="plaat" src="https://www.spiralex.nl/wp-content/uploads/2020/12/platenwisselaar-correct.png">
</p>
</div>
<div id="column">
<p id="afbeelding-lucht">
<img width="150" id="lucht" src="https://www.spiralex.nl/wp-content/uploads/2020/12/lucht-1.png">
</p>
</div>
<div id="column">
<p id="afbeelding-skids">
<img width="150" id="skids" src="https://www.spiralex.nl/wp-content/uploads/2020/12/skids-correct.png">
</p>
</div>
</div>
<div id="text">
<div id="text-buis">
<button id="zwembadwarmtewisselaar">Zwembadwarmtewisselaar</button>
</div>
<script type="text/javascript">
var buis = document.getElementById("buis")
var spiraal = document.getElementById("spiraal")
var plaat = document.getElementById("plaat")
var lucht = document.getElementById("lucht")
var skids = document.getElementById("skids")
buis.onclick = function(){
if(spiraal.className ==""){
spiraal.className = "hide";
plaat.className = "hide";
lucht.className = "hide";
skids.className = "hide";
zwembadwarmtewisselaar.className = "show";
You need to make a reference to zwembadwarmtewisselaar also. var zwembadwarmtewisselaar = document.getElementById("zwembadwarmtewisselaar");
Related
I've got the following code to move the childs order in an element. When I click once, it works fine, but when I click multiple times, it only works every 2nd or 3rd time.
const prevP = () => {
const pList = document.getElementById("project-list")
const firstProject = pList.firstChild;
const lastProject = pList.lastChild;
pList.insertBefore(lastProject, firstProject);
}
const nextP = () => {
console.log("next");
const pList = document.getElementById("project-list")
const firstProject = pList.firstChild;
let lastProject = pList.lastChild;
pList.insertBefore(firstProject, lastProject);
}
<span class="material-icons md-48 close icon-btn" onclick="prevP()"
>navigate_before</span
>
<div class="project-list" id="project-list">
<div class="project">
<img href="protfolio" alt="" />
<p>My Portfolio 1</p>
</div>
<div class="project">
<img href="protfolio" alt="" />
<p>My Portfolio 2</p>
</div>
<div class="project">
<img href="protfolio" alt="" />
<p>My Portfolio 3</p>
</div>
<div class="project">
<img href="protfolio" alt="" />
<p>My Portfolio 4</p>
</div>
<div class="project">
<img href="protfolio" alt="" />
<p>My Portfolio 5</p>
</div>
</div>
<span class="material-icons md-48 close icon-btn" onclick="nextP()"
>navigate_next</span
>
I also realised that sometimes the code messes up the order of the elements when using both buttons, and I have no idea why this is happening
The cause of that behaviour is that you use firstChild and lastChild. These may select text nodes with just some white space. Change these to firstElementChild and lastElementChild.
Secondly, the "Next" action should not insert the first element before the last element, but after it. For that you can use the method appendChild:
pList.appendChild(firstProject);
my code have one div and three picture
my main task is to show the same image in div when I hover over any picture what I am not able to understand is how can I do it with variables so that if in future if add more pictures it does not make any problem for me
note:: I want to do it by using variables I don't want to hard code image source.
I am also attaching the image for reference only.
function showproperties(element) {
var x = document.getElementById("box001");
x.innerHTML = element.alt;
var y = element.src;
document.getElementById("printsrc").innerHTML = y;
x.style.backgroundImage = y;
}
<body>
<div id="box001">main hover box
</div>
<div class="row">
<div class="image001 imgresize">
<img src="img01.jpg" alt="Image 001" onmouseover="showproperties(this)" onmouseleave="defaulttext(this)">
</div>
<div class="image002 imgresize">
<img src="img02.jpg" alt="image 002" onmouseover="showproperties(this)" onmouseleave="defaulttext(this)">
</div>
</div>
</body>
image
I tried to reproduce your issue and made some changes in it. I Hope that's how you wanted it to work. I have used some gif images url for demo purpose.
HTML:
<div id="box001" style="width: 100px;height: 100px; margin:7px">main hover box
</div>
<div class="row">
<div class="image001 imgresize">
<img src="https://c.tenor.com/Lvhj4QVL8-4AAAAS/server-is-for-javascript.gif" alt="Image 001" onmouseover="showproperties(this)" onmouseleave="defaulttext(this)">
</div>
<div class="image002 imgresize">
<img src="https://c.tenor.com/FIcvxhgc1sgAAAAS/dit-is-een-code-blok-code.gif" alt="image 002" onmouseover="showproperties(this)" onmouseleave="defaulttext(this)">
</div>
</div>
JS:
var x = document.getElementById("box001");
function showproperties(element) {
var y = element.src;
x.innerText = "";
x.style.backgroundImage = `url(${y})`;
}
function defaulttext(element) {
x.innerText = "main hover box";
x.style.backgroundImage = "none";
}
Full working code is available on this fiddle - https://jsfiddle.net/0h1urctn/
In the Index file I have these divs which I note by IDs, let's say there are 3 of these:
<div class="col-sm-6 col-md-4 col-lg-3 grid-item" id="one">
<div class="well">
<a href="http://" target="_blank">
<img class="class" src="img/pic.jpg" alt=""/>
</a>
<p></p>
<nav>
<div class="anim-icons">
<ul>
<li>
<a href="#">
<img src="" alt="">
</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
And this is part of the JS file:
var one = document.querySelector("#one");
var two = document.querySelector("#two");
var three= document.querySelector("#three");
const randomButton= document.querySelector("#randomButton");
function Randomizer() {
var array = [one, two, three];
var result = array[Math.floor(Math.random() * array.length)];
console.log(result);
var node = document.createElement("DIV");
node.innerHTML(result);
node.appendChild(result);
document.getElementById("#placeofresult").appendChild(node);
}
randomButton.addEventListener("click", Randomizer, false);
This if where I want that above div to be displayed:
<div>
<button class="btn btn-light" id="randomButton">
press!
</button>
<br>
<div id="placeofresult"> </div>
</div>
If I press the button, I want one of the divs from the Index file displayed in the div on the page where this JS belongs, but I don't know how to append a whole div by an id.
Thank you for your insights in advance!
appendChild will work fine if you need to insert div into another one.
Suppose, there is <div id="one">One</div> which you want to append inside <div id="placeofresult"></div>; you need to do the following
document.getElementById("placeofresult").appendChild(document.getElementById("one"));
or if you want to clone the div with id="one" and insert it, do the following:
const newOne = document.getElementById("one").cloneNode(true);
document.getElementById("placeofresult").appendChild(newOne);
Hope it helps. Revert for any doubts.
A solution for your problem could be to write the three divs you want to display entirely into js like this:
const divs = [
"
<div id="one">
...
</div>
",
"<div id="two">
...
</div>
",
"<div id="three">
...
</div>
"
]
Using your randomButton
randomButton.addEventListener("click", Randomizer, false);
You just have to set the innerHTML of your result div to the corresponding div of the divs array:
function Randomizer() {
var resultHTML = divs[Math.floor(Math.random() * array.length)];
document.getElementById("#placeofresult").innerHTML(resultHTML);
}
Another solution is to set the style of your divs to display none and display only the randomly chosen div after the button click:
Your html:
<div id="placeofresult">
<div id="one" style="display:none">
...
</div>
<div id="two" style="display:none">
...
</div>
<div id="three" style="display:none">
...
</div>
</div>
Your Randomizer:
function Randomizer() {
var array = [one, two, three];
// Set all divs to hidden
array.forEach(function(id){
document.getElementById(id).style.display = "none";
})
var result = array[Math.floor(Math.random() * array.length)];
document.getElementById(result).style.display = "block";
}
I am trying to get these pictures to swap when the button is pressed, the pictures are local to my computer and need to change in sequence. When I press the button, it just generates a new picture, I need them to interchange
<html>
<head>
<script>
var imgs=document.images;
function changeLight() {
var firstImage = imgs[0].src + "";
for(var i=0; i<imgs.length-1; i++){
imgs[i].src=imgs[i+1].src+"";
}
imgs[imgs.length-1].src=firstImage;
}
</script>
</head>
<body>
<div id="splash">
<img src="Traffic Light Red.gif" alt="" id="mainImg">
</div>
<body>
<div id="wrapper">
<div>
<img id="image" src="images/test" />
<br><br><br>
<button id="clickme" onclick="changeLight();">Click to change</button>
<img src="Traffic Light Yellow.gif" hidden />
<img src="Traffic Light Green.gif" hidden />
<img src="Traffic Light Yellow2.gif" hidden />
</div>
</div>
</body>
Here is some code. It works by comparing the src attributes of the hidden images, not a very elegant technique, but it works. This method will also break if you add images before the last hidden image, so use with care.
Also remember to rename the files so that they have no spaces. On the web, spaces get turned into %20s when being requested, which tends to break things :)
Anyways, here’s the code.
<!doctype html>
<html>
<body>
<div id="splash">
<img src="TrafficLightRed.gif" alt="" id="mainImg">
</div>
<div id="wrapper">
<div>
<button id="clickme" onclick="changeLight();">Click to change</button>
<img src="TrafficLightRed.gif" hidden>
<img src="TrafficLightYellow.gif" hidden>
<img src="TrafficLightGreen.gif" hidden>
</div>
</div>
<script>
function changeLight() {
var currentImg = document.getElementById("mainImg");
for(var i=1;i<3;i++) {
if(document.images[i].src == currentImg.src) {
currentImg.src = document.images[i + 1].src;
return;
}
}
currentImg.src = document.images[1].src;
}
</script>
</body>
</html>
A more robust technique would be to store an array of image links in your JavaScript, instead of the hacky hidden images. Brownie points for implementing that!
so you mean first come as third, second as first and third as second??
and again the same on next click??
check the fiddle http://jsfiddle.net/stdeepak22/hax3d8cv/
$(document).ready(
function(){
$('#nextImage').click(function(){
var firstImage = $('#AllImages img:first');
$(firstImage).remove();
$('#AllImages').append(firstImage);
});
});
UPDATE
pure JavaScript. for those who says "jQuery for just this? my my" ;)
http://jsfiddle.net/stdeepak22/0mcLcozk/
function f(){
var allImage = document.getElementById('AllImages');
var firstImage = allImage.getElementsByTagName('img')[0];
allImage.removeChild(firstImage);
allImage.appendChild(firstImage);
}
Refer the script :
<html>
<head>
<script>
var imgs=document.getElementsByTagName('img');
var init = 3;
console.log(imgs[2].src);
function changeLight(){
var target = document.getElementById('imaget');
var firstImage = imgs[0].src + "";
if(init < 5 ){
target.src = imgs[init].src;
init = init +1;
}
else{
init = 3;
target.src = imgs[init].src;
}
}
</script>
</head>
<div id="splash">
<img src="Traffic Light Red.gif" alt="" id="mainImg">
</div>
<body>
<div id="wrapper">
<div>
<img id="imaget" src="images/test" />
<br><br><br>
<button id="clickme" onclick="changeLight();">Click to change</button>
<img src="Traffic Light Yellow.gif" hidden />
<img src="Traffic Light Green.gif" hidden />
<img src="Traffic Light Yellow2.gif" hidden />
</div>
</div>
</body>
This works for me. I would like to suggest you to use array values (image srcs) set in javascript instead of using hidden images.
I'm having some trouble with my onClick event. No matter which image I click on it always opens the first image on the page. It just won't open any other image.
javascript:
function opennew() {
var largeImage = document.getElementById('largeImage');
largeImage.style.display = 'block';
largeImage.style.width=130+"px";
largeImage.style.height=130+"px";
var url=largeImage.getAttribute('src');
window.open(url,'Image','width=largeImage.stylewidth,
height=largeImage.style.height,resizable=1');
}
HTML:
<div class="oneitem">
<div><img id="largeImage" onClick="opennew();" src="Books-001.jpg" />
</div>
<p>Caption goes here</p>
</div>
are you using for every img the same ID attribute largeImage?
Id is an unique field and you are only allowed to use one ID Name within a Page.
Solution would be that you do someting like this:
Html:
<div class="oneitem">
<div>
<img id="1" onClick="opennew(1);" src="Books-001.jpg" />
</div><p>Caption goes here</p>
</div>
<div class="oneitem">
<div>
<img id="2" onClick="opennew(2);" src="Books-001.jpg" />
</div><p>Caption goes here</p>
</div>
Js:
function opennew(Id) {
var largeImage = document.getElementById(Id);
largeImage.style.display = 'block';
largeImage.style.width=130+"px";
largeImage.style.height=130+"px";
var url=largeImage.getAttribute('src');
window.open(url,'Image','width=largeImage.stylewidth,height=largeImage.style.height,resizable=1');
}