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
Related
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>
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;
}
I have the following problem: I need to be able to add dynamically a canvas (to be precise, a specific canvas, like this one https://web.chemdoodle.com/tutorial/2d-structure-canvases/sketcher-canvas/) in .js file but my several attempts failed. I want to insert the canvas into <div id="sketcher_canvas"></div>.The canvas can be created inside script tag only, so I need to add script tags to HTML too. Here is my HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>ELN</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" src="//normalize-css.googlecode.com/svn/trunk/normalize.css" />
<link href="{{url_for('static', filename='css/main.css')}}" rel='stylesheet' type='text/css'>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="{{url_for('static', filename='js/main2.js')}}"></script>
<!-- ChemDoodle -->
<link rel="stylesheet" href="{{url_for('static', filename='ChemDoodle/install/ChemDoodleWeb.css')}}" type="text/css">
<script type="text/javascript" src="{{url_for('static', filename='ChemDoodle/install/ChemDoodleWeb.js')}}"></script>
<!--these two are required by the SketcherCanvas plugin-->
<link rel="stylesheet" href="{{ url_for('static', filename='ChemDoodle/install/uis/jquery-ui-1.10.3.custom.css')}}" type="text/css">
<script type="text/javascript" src="{{url_for('static', filename='ChemDoodle/install/uis/ChemDoodleWeb-uis.js')}}"></script>
</head>
<body>
<script>
function make_canvas(){
sketcher = new ChemDoodle.SketcherCanvas('sketcher',600,200);
};
</script>
<div id='sketcher_canvas'>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</body>
</html>
And this is my .js:
$(document).ready(function(){
// First option
$('sketcher_canvas').append('<script>make_canvas();<\/script>);
// Second option
var script = document.createElement("script");
script.type = "text/javascript";
script.text = "make_canvas()";
var div = document.getElementById('sketcher_canvas');
div.innerHTML = script.text;
});
Any comments/suggestions are highly appreciated!
It looks like you are making things more complicated than they need to be. You don't need to make a new script to call a function from another script. You can call that function with a button like so:
<script>
function make_canvas(){
var newCanvas = document.createElement("canvas");
newCanvas.id = "sketcher";
newCanvas.class = "ChemDoodleWebComponent";
document.getElementById("sketcher_canvas").appendChild(newCanvas);
sketcher = new ChemDoodle.SketcherCanvas('sketcher',600,200);
};
</script>
<button onclick="make_canvas()">Make Canvas</button>
<div id='sketcher_canvas'>
</div>
EDIT: I have updated the make_canvas function. You can see how it works in this fiddle.
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);
I'm simply transitioning from a welcome page to a new page with content via jQuery's fadeOut/fadeIn and load functionality. Both pages have the same CSS and frameworks loaded, and both have black backgrounds. However, when it loads the second page, the background changes to white.
This is not a 'white flash' like the other questions asked on here. Literally, the body turns to white and stays that way. Any ideas why or what I'm doing wrong? I'm sure I've overlooked something very basic.
index.html:
<!DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(function(){
$('#go').click(function() {
$('html').fadeOut(2500, function() {
$(this).load('second.html', function() {
$(this).fadeIn(2500);
});
});
return false;
});
})
});
</script>
</head>
<body>
<a id="go">Go!</a>
</body>
</html>
second.html:
<!DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
</head>
<body> </body>
</html>
style.css:
body {
background: #000000;
}
analysis...
$('#go').click(function() { // clicking go...
$('html').fadeOut(2500, function() { // html fade out....
$(this).load('second.html', function() { // html content changes...
$(this).fadeIn(2500); // this line can't run... cause entire html changes... including the <head> that has the script... this line is goodbye...
});
});
return false;
});
suggestion, only change the content of <body> tag...