How can I load images on page load with Javascript? - javascript

I'm a student and new to javascript trying to load the images on my webpage using javascript. I tried to put the image sorce in an array and made for loop that would load images on the the site. But i can't seem to make it work. I'll post my code.
<!DOCTYPE html>
<html>
<head>
<title> Lucky lottery</title>
<link rel="stylesheet" href="theme.css">
<script> src = "imageLoader.js"</script>
</head>
<body>
<div id='container'>
<div id='header'>
<div id=title><h1 id='titlehead'> Lucky Lottery</h1></div>
</div>
<div id=gallery>
<div class=images id=image_0></div>
<div class=images id=image_1></div>
<div class=images id=image_2></div>
<div class=images id=image_3></div>
<div class=images id=image_4></div>
<div class=images id=image_6></div>
<div class=images id=image_7></div>
<div class=images id=image_8></div>
</div>
<div id=subfooter>
<div class=input>Please fill in your name</div>
<div id=win_btn>win </div>
</div>
<div id=footer>
<p>
<h2> Please Sign Up for only 10 dollars. Maybe you
win one of the amazing products. </h2></p>
</div>
JavaScript:
function imageLader() {
var imageLijst = ["../images/melk.png", "../images/wasmiddel.png", "../images/bike.png", "../images/holiday.png", "../images/lego-starwars.png",
"../images/electrische-tandenborstel.png", "../images/my-little-pony.png", "../images/wii-u.png"];
for(var i = 0; i <imageLijst.length; i++) {
var imgDiv = document.getElementById("image_"+ i);
var img = new Image();
img.src = imageLijst [i];
imgDiv.appendChild(img);
}
}
window.onload = imageLader;

<script> src = "imageLoader.js"</script>
is invalid. That should be
<script src="imageLoader.js"></script>
instead.
Also, though not shown here, just assigning to window.onload is dangerous, as it may be overwritten.

If you can, elaborate on how its not working. Is there an error (i.e. a JavaScript error) or is the behavior not as you expect (i.e. it appears to be doing nothing)?
I would suspect that in this instance its not doing anything because of the following line.
<script> src = "imageLoader.js"</script>
The "src" attribute needs to be defined as a part of the script tag. Trying changing it to this.
<script type="text/javascript" src="imageLoader.js"></script>

You are missing lots of quotation marks in your html markup
Example:
<div class=images id=image_0></div>
should be
<div class="images" id="image_0"></div>
or
<div class='images' id='image_0'></div>

Related

appending images to a div jquery

I have div container, that holds 4 more divs and each of these divs have a header, image and a paragraph tag. What I am making is a game, where when I click on one of the divs, images, the remaining 3 images that were not clicked move to the move to another div section with a class of "enemies". How would I do this without having a bunch of onclick functions for each character?
<!DOCTYPE html>
<html lang="en">
<head>
<title>Week 4 Game</title>
<link rel = "stylesheet" type = "text/css" href = "assets/css/reset.css">
<link rel="stylesheet" type="text/css" href="assets/css/style.css">
<!-- Added link to the jQuery Library -->
<script src="https://code.jquery.com/jquery-2.2.3.js" integrity="sha256-laXWtGydpwqJ8JA+X9x2miwmaiKhn8tVmOVEigRNtP4=" crossorigin="anonymous"></script>
<script type="text/javascript" src = "assets/javascript/game.js"> </script>
</head>
<body>
<div class = "characters">
<div class="charContainer">
<h2 id="c1"></h2>
<img class="vade" src="assets/images/vader.jpg">
<p id="c1hp" data-hp = "120"></p>
</div>
<div class="charContainer1">
<h2 id="c2"></h2>
<img class="skywalker" src="assets/images/luke.jpg">
<p id="c2hp" data-hp = "100"></p>
</div>
<div class="charContainer2">
<h2 id="c3"></h2>
<img class="obi" src="assets/images/obiwan.jpg">
<p id="c3hp" data-hp = "150"></p>
</div>
<div class="charContainer3">
<h2 id="c4"></h2>
<img class="dmaul" src="assets/images/maul.png">
<p id="c4hp" data-hp = "180"></p>
</div>
</div>
<div id="your">
<h2>Your Character</h2>
<!-- <img class="dmaul" src="assets/images/maul.png"> -->
</div>
</body>
</html>
jQuery
$(document).ready(function(){
$('#c1').text("Darth Vader");
$('#c2').text("Luke Skywalker");
$('#c3').text("Obi Won");
$('#c4').text("Darth Maul");
var health = $('#c1hp').data('hp');
$('#c1hp').html(health);
var health = $('#c2hp').data('hp');
$('#c2hp').html(health);
var health = $('#c3hp').data('hp');
$('#c3hp').html(health);
var health = $('#c4hp').data('hp');
$('#c4hp').html(health);
$('.charContainer').on('click', function(){
var yourCharacter = $(this);
$('#your').append(yourCharacter);
});
});
I am trying to move anyone of the <div>s .charContainer, .charContainer1, .charContainer2, .charContainer3 including the header, <img> and <p> tag inside of it to the <div> with id #your.
Update: I found a solution by doing a .each function for the charContainer. Instead of having 4 different charContainers, I just all named them the same class and in the .each function, for each of these classes that did not get appended to the chosen character box, i added a class called .foes, so that I can now differentiate between divs that have been "selected" and those that have not.
I believe your error was that you have different classes for "charContainer" (1,2,3,4). In your case the event should look like
$('.charContainer, .charContainer1, .charContainer2, .charContainer3').on('click', function(){
Also the way you do it - you will add multiple characters clicking on them one after another. How about this:
$(function() {
$('.charContainer').on('click', function(){
var yourCharacter = $(this);
$('#your').empty().append(yourCharacter.clone());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class = "characters">
<div class="charContainer">
<h2 id="c1">Darth Vader</h2>
<img class="vader" src="assets/images/vader.jpg">
<p id="c1hp" data-hp = "120"></p>
</div>
<div class="charContainer">
<h2 id="c2">Luke Skywalker</h2>
<img class="skywalker" src="assets/images/luke.jpg">
<p id="c2hp" data-hp = "100"></p>
</div>
<div class="charContainer">
<h2 id="c3">Obi Wan</h2>
<img class="obiwan" src="assets/images/obiwan.jpg">
<p id="c3hp" data-hp = "150"></p>
</div>
<div class="charContainer">
<h2 id="c4">Darth Maul</h2>
<img class="dmaul" src="assets/images/maul.png">
<p id="c4hp" data-hp = "180"></p>
</div>
</div>
<div id="your">
<h2>Your Character</h2>
</div>

Get an specific class field content from the same page (Javascript or PHP)

I would like to get the content of an specific div class in Javascript or PHP. I've found some possible solutions but no one worked for me. This is the code of the page:
<div class="um-field um-field-professional_tag um-field-text" data-key="professional_tag">
<div class="um-field-label"><label for="professional_tag-27326">Professional Tag</label>
<div class="um-clear"></div></div>
<div class="um-field-area">
<div class="um-field-value">text_to_be_retrieved</div>
</div></div>
The required content is the one containing "text_to_be_retrieved" but the code shall not be aware of the text "text_to_be_retrieved" (it has to retrieve the text just with the surrounding divs information). Is it possible to store it in a PHP/Javascript variable to be used by another algorithm?
Thanks in advance.
You can do it like this, store those values in object:
var obj = {};
var nick = $('.um-field-label label').attr('for');
var val = $('.um-field-label').next('.um-field-area').find('.um-field-value').text();
obj.nickName = nick;
obj.value = val;
alert(obj.nickName + " " + obj.value);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="um-field um-field-nickname um-field-text" data-key="nickname">
<div class="um-field-label">
<label for="nickname-27326">Professional Tag</label>
<div class="um-clear">
</div>
</div>
<div class="um-field-area">
<div class="um-field-value">adolfodominguez</div>
</div>
Use :contains selector to find elements that contains specified 'text'
If you have a variable holding the text wrapped in div, you can pass the variable in :contains
Try this:
var myText = 'adolfodominguez'; // Variable holding text value
var element = $('.um-field-value:contains("' + myText + '")')
console.log(element);
<script src="http://gh-canon.github.io/stack-snippet-console/console.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="um-field um-field-nickname um-field-text" data-key="nickname">
<div class="um-field-label">
<label for="nickname-27326">Professional Tag</label>
<div class="um-clear">
</div>
</div>
<div class="um-field-area">
<div class="um-field-value">adolfodominguez</div>
</div>
Your HTML, I appended an element to show you the output.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="um-field um-field-professional_tag um-field-text" data-key="professional_tag">
<div class="um-field-label">
<label for="professional_tag-27326">Professional Tag</label>
<div class="um-clear"></div>
</div>
<div class="um-field-area">
<div class="um-field-value">adolfodominguez</div>
</div>
</div>
<br>Copied text:
<p class='demo'></p>
Using the jQuery framework of Javascript, you will get the result you are looking for:
var text = $("[for='professional_tag-27326']").parent('.um-field-label').next('.um-field-area').children('.um-field-value').text();
$('.demo').text(text);
https://jsfiddle.net/73mtmLLv/5/

HTML and Javascript picture change on button click

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.

Why does my javascript-code to hide/show div-boxes not work?

I'm trying to hide/show the main-contentholders on my website based on what menu-option the reader clicks on. This seems like a simple thing to me, I've done it multiple times before but now it just won't work. My code looks like this:
<!DOCTYPE html>
<html>
<head>
<title id="titel">Mercedes F1</title>
<link rel="stylesheet" href="mercedes.css">
<meta name="viewport" content="width=device-width; initial-scale=1">
<script>
function sidbyte(p){
var p;
if(p == 1) {
document.getElementById("forare").style.display = "block";
document.getElementById("mercedes").style.display = "none";
document.getElementById("statistik").style.display = "none";
}
else if(p == 2) {
document.getElementById("forare").style.display = "none";
document.getElementById("mercedes").style.display = "block";
document.getElementById("statistik").style.display = "none";
}
else if(p == 3) {
document.getElementById("forare").style.display = "none";
document.getElementById("mercedes").style.display = "none";
document.getElementById("statistik").style.display = "block";
}
}
</script>
</head>
<body>
<div class="page">
<nav>
Förarbiografi
<img src="Media/Menu_icon.svg" class="menuicon" alt="MenuIcon">
Mercedes F1
<img src="Media/Menu_icon.svg" class="menuicon" alt="MenuIcon">
Statistik
</nav>
<div id="forare" class="main">
<h1 class="rubrik">Förare</h1>
<p>
</p>
</div>
<div id="mercedes" class="main">
<h1 class="rubrik">Mercedes F1 genom åren</h1>
<p>
</p>
</div>
<div id="statistik" class="main">
<h1 class="rubrik">Statistik</h1>
<p>
</p>
</div>
</div>
</body>
</html>
The main problem is that whenever you are clicking on the a tag the page reloads. So put # inside the href attributes of the a tags. Thats it.
Click Here
jsFiddle
Note : The local p declared inside the function is of no use as you are using the parameter. So better you remove that if you are only using the parameter, though it doesn't effect your code unless you refer to that with this keyword. Like,
this.p // refers to the local p you declared.
You're reloading the page each time the action is triggered, so the default state is returned, meaning that the transformation is no longer applied. By giving the <a> tag an href of # or javascript:void(0);, you can prevent the page refresh. Or even better, you can actually execute the JS from the href itself.
I actually recommend using javascript:void(0);, since it doesn't jump to the top of the page by default, while # does. However, that behavior can be prevented with a simple onclick="return false".
Codepen
Find the below code which i did using jQuery. It's very short and easy to understand.
HTML
<div class="page">
<nav>
<a class="one" href="#">Förarbiografi</a>
<img src="Media/Menu_icon.svg" class="menuicon" alt="MenuIcon">
<a class="two" href="#">Mercedes F1</a>
<img src="Media/Menu_icon.svg" class="menuicon" alt="MenuIcon">
<a class="three" href="#">Statistik</a>
</nav>
<div id="forare" class="main">
<h1 class="rubrik">Förare</h1>
<p>Content</p>
</div>
<div id="mercedes" class="main">
<h1 class="rubrik">Mercedes F1 genom åren</h1>
<p>Content</p>
</div>
<div id="statistik" class="main">
<h1 class="rubrik">Statistik</h1>
<p>Content</p>
</div>
</div>
JS
$('.one').click(function(){
$('.main').hide();
$('#forare').show();
});
$('.two').click(function(){
$('.main').hide();
$('#mercedes').show();
});
$('.three').click(function(){
$('.main').hide();
$('#statistik').show();
});
CSS
.main{
display:none;
}
JS FIDDLE DEMO

Javascript for opening tabs using links

The below tabs works fine with external js file.How to add the links so that when the user click the link www.ll.com/#comments ,he will see the comments..tab
http://www.dynamicdrive.com/dynamicindex17/tabcontent/tabcontent.js
<ul id="countrytabs" class="shadetabs">
<li>Tutorial</li>
<li>Comments</li>
</ul>
<div class="contentbox">
<div id="movies" class="tabcontent">
Download movies here
</div>
<div id="comments" class="tabcontent">
</div>
<script type="text/javascript">
var countries=new ddtabcontent("countrytabs")
countries.setpersist(true)
countries.setselectedClassTarget("link") //"link" or "linkparent"
countries.init()
</script>
Try this, after countries.init():
var tagIndex = window.location.toString().indexOf('#');
if (tagIndex >= 0)
countries.expandit(window.location.toString().substring(tagIndex).toLowerCase());
EDIT: You had a few problems in the example code you provided (You did not wait for the document onload event. You did not follow the naming-conventions of the A links as on the ddtabcontent documentation site, ...)
I have created this example to test its functionality:
<html>
<head>
<script type="text/javascript" src="tabcontent.js"></script>
<script type="text/javascript">
function onload()
{
var countries = new ddtabcontent("countrytabs");
countries.setpersist(true);
countries.setselectedClassTarget("link");
countries.init();
var url = window.location.toString();
var tagIndex = url.indexOf('#');
if (tagIndex >= 0)
countries.expandit(url.substring(tagIndex).toLowerCase());
}
</script>
<style type="text/css">
div.tabcontent
{
display: none;
}
</style>
</head>
<body onload="onload()">
<ul id="countrytabs" class="shadetabs">
<li>Movies</li>
<li>Comments</li>
</ul>
<div class="contentbox">
<div id="movies" class="tabcontent">
Download movies here
</div>
<div id="comments" class="tabcontent">
Put comments here
</div>
</div>
</body>
</html>

Categories