displaying loops from javascript to html - javascript

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);

Related

javascript for loop issue

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>

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

jQuery alert does not work

I've tried for several hours know to make this bit of jquery code work but I just can't find what I did wrong with it. The equivalent in normal javascript works just fine. What is the problem?
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
alert("HI");
$(document).ready(function(e){
alert("Hi");
$("#button5").click(function(event)
{
alert("HI");
});
});
</script>
</head>
<body>
<link rel="stylesheet" type="text/css" href="ezcap.css">
<div class="container">
<div id="sidebar">
<div id="sbheader"></div>
<div id="button2"></div>
<div id="button3"></div>
<div id="button4"></div>
<div id="button5"></div>
</div>
<div id="header">lol</div>
<div id="footer">feg</div>
</div>
</body>
</html>
You can't put a script in a tag that has a src attribute. You need to call the jQuery library in one script tag and then put your actual script in another.
Try this:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
alert("HI");
$(document).ready(function(e){
alert("Hi");
$("#button5").click(function(event)
{
alert("HI");
});
});
</script>
Problem is here
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
//js code
</script>
Here in your script tag you are giving a source and some code also, You should write separate script tags for both, see bellow
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<script>
//js code
</script>
Try this:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
alert("HI");
$(document).ready(function(e){
alert("Hi");
$("#button5").click(function(event)
{
alert("HI");
});
});
</script>
</head>
<body>
<link rel="stylesheet" type="text/css" href="ezcap.css">
<div class="container">
<div id="sidebar">
<div id="sbheader"></div>
<div id="button2"></div>
<div id="button3"></div>
<div id="button4"></div>
<div id="button5"></div>
</div>
<div id="header">lol</div>
<div id="footer">feg</div>
</div>
</body>
</html>
You are trying to call the jQuery library while also implementing your code snippet here:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
You should be first loading the jQuery library and then implementing your code snippet like this:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
alert("HI");
$(document).ready(function(e){
alert("Hi");
$("#button5").click(function(event){
alert("HI");
});
});
</script>
The reasoning behind this is because you cannot call the script attribute to load a library and then define some code in the same tag, you need to:
Load the script
Declare your code
Hope that helps!
The JS script reference line of code should end and actual JQuery code should be enclosed under separate script tags.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" ></script>
<script type="text/javascript">
alert("HI");
$(document).ready(function(e){
alert("Hi");
$("#button5").click(function(event)
{
alert("HI");
});
});
</script>
</head>
<body>
<link rel="stylesheet" type="text/css" href="ezcap.css">
<div class="container">
<div id="sidebar">
<div id="sbheader"></div>
<div id="button2"></div>
<div id="button3"></div>
<div id="button4"></div>
<div id="button5">abcd</div>
</div>
<div id="header">lol</div>
<div id="footer">feg</div>
</div>
</body>
</html>
Your problem was including your code in that script tag for jQuery.
Change to this:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" type="text/css" href="ezcap.css">
</head>
<body>
<div class="container">
<div id="sidebar">
<div id="sbheader"></div>
<div id="button2"></div>
<div id="button3"></div>
<div id="button4"></div>
<div id="button5"></div>
</div>
<div id="header">lol</div>
<div id="footer">feg</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
alert("HI");
$(document).ready(function(e){
alert("Hi");
$("#button5").click(function(event)
{
alert("HI");
});
});
</script>
</body>
</html>
Not a problem but you do not need the type="text/javasript". See: Do you need text/javascript specified in your <script> tags?
And it is better to have your scripts at the bottom so that your content can load faster. See: If I keep JavaScript at bottom or keep JavaScript in <head> inside document.ready, are both same thing?
Your <link> for CSS needed to be inside your <head>

Unable To Change CSS JavaScript

I just want to set display property of one of my div to block based on event, by default its 'none'
Its not happening with error: Cannot set property 'display' of undefined
Below is my code. Please suggest.
HTML
<!DOCTYPE html>
<html >
<head>
<meta charset="ISO-8859-1">
<title>Sample Mod Pop UP</title>
<link rel="stylesheet" href="css/main.css" />
</head>
<body class="body">
<div class="popUp" id="id1">
<p>Are You Sure You Want to Quit?</p>
<span>&#10006</span>
</div>
<button onClick=closeWindown() class="btn">Close</button>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>
JavaScript
function closeWindown(){
document.getElementsByClassName("popUp").style.display="block";
}
getElementsByClassName gets a nodeList, so you have to iterate
function closeWindown(){
var elements = document.getElementsByClassName("popUp");
for (var i=elements.length; i--;) {
elements[i].style.display = "block";
}
}
As a sidenote, querySelectorAll('.popup') has better support, but is non-live.

Google prettify not showing colors

I cant seem to find whats wrong. I have this html file used with google prettify. Both prettify.css and prettify.js are in the same directory as the html file
<html>
<head>
<script src="prettify.js"></script>
<link rel=StyleSheet href="prettify.css" type="text/css">
</head>
<body>
<pre class="prettyprint">
//Some sample text
for(int i = 0; i<10; i++){
//Do something
}
</pre>
</body>
</html>
And this is what it looks like
What am I missing to have the colors showing?
Thanks
Add onload="prettyPrint()" to your document's body tag.
<body onload="prettyPrint()">
Here's the code that will do the proper syntax highlighting
<html>
<head>
<!--<script src="prettify.js"></script>I commented out your links-->
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
<!--<link rel=StyleSheet href="prettify.css" type="text/css"> I commented out your links-->
</head>
<body>
<pre class="prettyprint">
//Some sample text
for(int i = 0; i<10; i++){
//Do something
}
</pre>
</body>
</html>
See the code live here

Categories