javascript for loop issue - javascript

Issue I am having is as follows: This for loop should be putting a number in the address and counting up to 152 and then putting it full address as follows
<img src="http://pokeapi.co/media/img/1.png">
<img src="http://pokeapi.co/media/img/2.png">
and so on. What am I missing?
var webaddress = ['<img src="http://pokeapi.co/media/img/">'];
var text = "";
var i;
for (i = 0; i < 152; i++) {
text += webaddress[i] + ".png";
}
document.getElementById("Pokeman").innerHTML = text;
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
</style>
<script type="text/javascript" rel="script" type="script" href="script.jss"></script>
<script type="text/javascript" src='http://code.jquery.com/jquery-1.10.2.min.js'></script>
</head>
<body>
<div id="container">
<p id="Pokeman"></p>
</div>
</body>
</html>

You can create the webaddress as root string and replace it inside loop
var webaddress = '<img src="http://pokeapi.co/media/img/[index].png">';
var text = "";
for (var i = 1; i <= 152; i++) {
text += webaddress.replace("[index]", i);
}
document.write(text);

You are setting your javascript in the head - but the element that is referenced (#Pokeman) is not in the DOM yet - simply move the js block to the end - before the closing body tag. and since you are using jquery - i simplified the js and used it too.
EDIT - I just inserted your img code into the function so that it will render the images as the number increments.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<div id="container">
<p id="Pokeman"></p>
</div>
<script type="text/javascript" rel="script" type="script" href="script.jss"></script>
<script type="text/javascript" src='http://code.jquery.com/jquery-1.10.2.min.js'></script>
<script>
$(document).ready(function(){
for (var i = 1; i <= 152; i++) {
$("#Pokeman").append('<img src="http://pokeapi.co/media/img/'+ i + '.png"/>');
}
})
</script>
</body>
</html>

Related

I'm trying 2 create a slideshow in JavaScript

I'm trying to create an automatic slideshow in HTML and JavaScript, but the code is making my entire webpage blank.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Page title</title>
<link rel="stylesheet" href="4.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="landing slides">
<div class="slides">
<img src="effiel tower.png" alt="">
<img src="Capetown.png" alt="">
<img src="china mountain.png" alt="">
</div>
</div>
The images on the HTML are working fine, but as soon as I enter the JavaScript code it gives me a blank page.
<script>
window.onload = function(){
var index = 0;
show ();
function show(){
var i;
var slides = document.getElementsByClassName("slides");
for(i=0;i<slides.length; i++){
slides[i].style.display ="none"
}
index=index + 1;
if(index>slides.length){
index=1;
}
slides[index-1].style.display = "block";
setTimeout(show, 1500);
}
}
</script>
</body>
</html>
you selected the parent of the images. It means you are hiding parent. Not images. add class to your images and select them by getElementsByClassName.
let index = 0;
const slides = document.querySelectorAll('.slides > img');
function showSlideAt(index) {
for(let i=0;i<slides.length; i++){
const slide = slides[i];
slide.style.display = i === index ? "block" : "none";
}
}
showSlideAt(0);
setInterval(() => {
index = (index + 1) % slides.length;
showSlideAt(index);
}, 1500)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Page title</title>
<link rel="stylesheet" href="4.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="landing slides">
<div class="slides">
<img src="https://www.gravatar.com/avatar/12a357d653e4cf98f3d3f06f122c2c1f?s=64&d=identicon&r=PG" height="100">
<img src="https://www.gravatar.com/avatar/fd4522e30ca42954b37fcc3b4072c3f9?s=48&d=identicon&r=PG&f=1" height="100">
</div>
</div>
</body>
</html>

How can I make a button that shows a hidden image

I am a beginner and have created a piece of code that displays an image picked from a folder of images. I would like some help creating some code that will:
- Hide the image when you first visit the page
- Include a button that, when pressed will show the image
Any help would be greatly appreciated and I will include my code (so far) below.
<!doctype html>
<html>
<head>
<style>
</style>
<meta charset="utf-8">
<title>random image?</title>
</head>
<body>
<script type = "text/javascript">
<!--
document.write("<img src = \"" + Math.floor(1 + Math.random() * 42) + ".jpg\" />");
</script>
</body>
</html>
You can initially hide the image with CSS in the style tag:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>random image?</title>
<style>
img{
display:none;
}
</style>
<script>
function showImage(){
document.getElementsByTagName("img")[0].style.display = "inline-block";
}
</script>
</head>
<body>
<script type = "text/javascript">
<!--
document.write("<img src = \"" + Math.floor(1 + Math.random() * 42) + ".jpg\" />");
</script>
<button onclick="showImage();">show</button>
</body>
</html>
Or by typing it directly in the inline style attribute:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>random image?</title>
<script>
function showImage(){
document.getElementsByTagName("img")[0].style.display = "inline-block";
}
</script>
</head>
<body>
<script type = "text/javascript">
<!--
document.write("<img src = \"" + Math.floor(1 + Math.random() * 42) + ".jpg\" style=\"display:none;\"/>");
</script>
<button onclick="showImage();">show</button>
</body>
</html>
Or by calling a JavaScript function when the page loads (at the risk of the image flashing on screen before it's hidden):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>random image?</title>
<script>
function hideImage(){
document.getElementsByTagName("img")[0].style.display = "none";
}
function showImage(){
document.getElementsByTagName("img")[0].style.display = "inline-block";
}
</script>
</head>
<body onload="hideImage();">
<script type = "text/javascript">
<!--
document.write("<img src = \"" + Math.floor(1 + Math.random() * 42) + ".jpg\"/>");
</script>
<button onclick="showImage();">show</button>
</body>
</html>
If I were to do this myself, I'd do it like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>random image?</title>
<script src="https://randojs.com/1.0.0.js"></script>
<style>
#myImage{
display:none;
}
</style>
<script>
function showImage(){
var image = document.getElementById("myImage");
if(image.style.display != "inline-block"){
image.src = rando(1, 42) + ".jpg";
image.style.display = "inline-block";
}
}
</script>
</head>
<body>
<img src="" alt="Random image" id="myImage"/>
<button onclick="showImage();">show</button>
</body>
</html>
The "rando" function is sourced from a tool called rando.js that I use to simplify randomness in javascript and make it more readable. It's not a native JavaScript function, so I source it in with this line:
<script src="https://randojs.com/1.0.0.js"></script>
Everyone has their own style. Pick the technique that works best for you.

From javascript external file cannot get id from HTML file and replace content

HTML code:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<script src="index.js"></script>
<title>Design All</title>
</head>
<body>
<h2>------------------------</h2>
<h1 id="test">Should this change?!</h1>
<h2>------------------------</h2>
</body>
</html>
External JavaScript Code:
var product = "Camera";
var price = 130;
var introduction = document.getElementById("test");
introduction.innerHTML = product + " " + price;
Note:
1. If i use a function call, it works.
2. If i write the script within the HTML file, it works as well.
3. I used jsfiddle, it displays perfectly fine.
Can anyone help me with this issue?
I think HTML was not loaded yet. Use onload attribute on body to ensure DOM is loaded :
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<script>
var myFunction = function() {
var product = "Camera";
var price = 130;
var introduction = document.getElementById("test");
introduction.innerHTML = product + " " + price;
}
</script>
<title>Design All</title>
</head>
<body onload="myFunction()">
<h2>------------------------</h2>
<h1 id="test">Should this change?!</h1>
<h2>------------------------</h2>
</body>
One thing you have to be clear is that HTML loaded sequentially.
In your code
...........................
<script src="index.js"></script>
................
....................
<h1 id="test">Should this change?!</h1>
Here the JavaScript loaded first then the remaining html.
As the JavScript will execute when it is loaded for the way you write it, it will not find the later html tags. So it will not get that element (<h1 id="test">Should this change?!</h1>).
But if you load the JS later then it will work as expected.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Design All</title>
</head>
<body>
<h2>------------------------</h2>
<h1 id="test">Should this change?!</h1>
<h2>------------------------</h2>
</body>
<script src="index.js"></script>
That's why experts suggest to load JS at the end.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Design All</title>
<script src="index.js"></script>
</head>
<body onload = "chng()">
<h2>------------------------</h2>
<h1 id="test">Should this change?!</h1>
<h2>------------------------</h2>
</body>
</html>
index.js
// JavaScript
function chng(){
var product = "Camera";
var price = 130;
var introduction = document.getElementById("test");
introduction.innerHTML = product + " " + price;
}

How to use the JavaScript code from a js file

I am trying to use the JavaScript code from a .js file.
My code works fine when I keep this code in the .html file within the script tags.
What changes should I make when I move the script to a .js file.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Cat Clicker</title>
<script type="text/javascript" src="js/app.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div id='cc'><img src="images/cat1.png"><br /></div>
<div>The number of times you clicked the cat is:</div><br />
<div id='times'>0</div>
</body>
</html>
JS:
var pic = document.getElementById('cc');
pic.addEventListener('click', function() {
var count = document.getElementById('times').innerHTML;
count = parseInt(count) + 1;
document.getElementById('times').innerHTML = count;
}, false);
You must wrap that code inside window.onload to make it run after all the DOM elements are loaded.
window.onload = function() {
var pic = document.getElementById('cc');
pic.addEventListener('click', function() {
var count = document.getElementById('times').innerHTML;
count = parseInt(count) + 1;
document.getElementById('times').innerHTML = count;
}, false);
}
Else just move the script tag to the bottom of the page just above </body>
<!DOCTYPE html>
<html>
<head>
<title>Cat Clicker</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div id='cc'><img src="images/cat1.png"><br /></div>
<div>The number of times you clicked the cat is:</div><br />
<div id='times'>0</div>
<script type="text/javascript" src="js/app.js"></script>
</body>
</html>
It's possible that your JavaScript code attempted to get an element which has not been rendered by the browser.
Solution # 1
You can try loading the JavaScript file after all elements have been rendered like this:
<!DOCTYPE html>
<html>
<head>
<title>Cat Clicker</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div id='cc'><img src="images/cat1.png"><br /></div>
<div>The number of times you clicked the cat is:</div><br />
<div id='times'>0</div>
<script type="text/javascript" src="js/app.js"></script>
</body>
</html>
Solution # 2
You can also try using jQuery and do the following:
$(function(){
// and also convert this to its jQuery counterpart
var pic = document.getElementById('cc');
pic.addEventListener('click', function() {
var count = document.getElementById('times').innerHTML;
count = parseInt(count) + 1;
document.getElementById('times').innerHTML = count;
}, false);
})
If these didn't work, try using the Chrome developer tools and check if js/app.js is pointing to the JavaScript file

displaying loops from javascript to html

I am trying to display the results of a loop into my html from my JS file using Jquery. How do I do it..
here is my html code
<!DOCTYPE html>
<html>
<head>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="css/styles.css" rel="stylesheet" type="text/css">
<script src="js/jquery-1.11.2.js"></script>
<script src="js/scripts2.js"></script>
<title>Loops</title>
</head>
<body>
<div class="container">
<h1>Loops </h1>
<div id="results"> Here is your loop!
<p> <span class="loop"></span> </P>
</div>
</div>
</body>
</html>
here is my JS and JQuery code
$(document).ready(function(){
var n = parseInt(prompt("Give me a number from '1':"));
for (var i = 0; i < n; i++) {
$(.loop).append(i);
};
thanks
You're not targeting .loop correctly. It should be
$(".loop").append(i);
Instead of
$(.loop).append(i);
FIDDLE
You should use quotes when using a selector in the jQuery function:
$('.loop').append(i);

Categories