This question already has answers here:
Using HTML script tags to code while they have a source
(2 answers)
Closed 2 years ago.
<!DOCTYPE html>
<html>
<style></style>
<script src="main.js">
function myFunction() {
document.body.style.background = "url('images/img_tree.png')"
}
</script>
<body>
<button onclick="myFunction()">Set background</button>
</body></html>
Why won't this work? I am using the brackets IDE currently.
The problem is you set src="main.js", in this case all script inside script tag will be not execute, it only execute javascript in main.js file.
<!DOCTYPE html>
<html>
<style></style>
<script>
function myFunction() {
document.body.style.background = "url('https://geology.com/world/world-map-360.gif')"
}
</script>
<body>
<button onclick="myFunction()">Set background</button>
</body></html>
You need to remove the src="main.js" from your script tag
Does this fix it ?
<!DOCTYPE html>
<html>
<style></style>
<script>
function myFunction() {
document.body.style.background = "url('https://fsb.zobj.net/crop.php?r=e9wUbuA4gtFtr46UA2PE5GMcriRP4IPSzPTWOBs82VJEK_zIJcyRW5kh6JE_GrxfEmFki6gil-dD-LL5eMpMNcj5Sjw4u4Y6MwkMhR-1WlgJ50l6FRXVLRylR_2lbwvcMeLEOIUkEzNPODPaAqMfI4ClDs3vu9s3Z2s8bF55uCt0KPXzxye5ueQyfDyFFgfks2aGkOwr7pURMvK_')"
}
</script>
<body>
<button onclick="myFunction()">Set background</button>
</body>
</html>
Delete src="main.js" on script tag
if you want to use main.js file. you have to add extra script tag
like this
<!DOCTYPE html>
<html>
<style></style>
<script src="main.js"></script>
<script>
function myFunction() {
document.body.style.background = "url('images/img_tree.png')"
}
</script>
<body>
<button onclick="myFunction()">Set background</button>
</body></html>
Or you can add myFunction on your main.js file
Use the following code snippet for the add background image.
// Sets the background image
const setBackground = (image) => {
document.body.style.background = "url('"+IMAGE_URLS.[image]+"')";
};
Related
I trying to change the color of a "p" tag using getElementById(), but its not working...
HTML:
<p id="fon">changing color</p>
JavaScript:
var c = document.getElementById(fon);
c.style.color = 'blue';
The id should be in quotation marks
document.getElementById("fon");
If you want to change paragraph color using JS. You can use this code .. :)
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript">
function changecolor()
{
document.getElementById("fon").style.color='blue';
}
</script>
</head>
<body>
<p id="fon" onclick="changecolor()"> hello this is a para</p>
</body>
</html>
I've read many tutorials and tried them, but they don't work.
Just for example I wrote this simple code:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p id="testElement"> Html text</p>
<script>
var paragraph = document.getElementById("testElement");
paragraph.innerHTML = "Test Message";
</script>
</body>
</html>
I get Test Message text in my page.
Then I put my JS code to an external file: '/js/js.js'
var paragraph = document.getElementById("testElement");
paragraph.innerHTML = "Test Message";
And modify the HTML file to:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="/js/js.js"></script>
</head>
<body>
<p id="testElement"> Html text</p>
</body>
</html>
When I open the HTML file in a browser, I only get Html text. My JS does not work. Please explain what I am doing wrong.
Your problem is that javascript linked in head is executed before the body is loaded, so you can just put the script at the end of the body like this:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p id="testElement"> Html text</p>
<script type="text/javascript" src="js/js.js"></script>
</body>
</html>
Check the JavaScript error console.
Your code runs before the document is rendered so the node testElemet doesn't exist.
Either move your script-include down as the last element in the body or wrap your code in a load/ready event.
function on_document_ready(callback) {
if (document.readyState === "complete") {
callback();
} else {
document.addEventListener("DOMContentLoaded", callback);
}
}
on_document_ready(function () {
var paragraph = document.getElementById("testElemet");
paragraph.innerHTML = "Test Message";
});
This should work fine:
var paragraph = document.getElementById("testElement");
paragraph.innerHTML = "Test Message";
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p id="testElement">Html text</p>
<script type="text/javascript" src="/js/js.js"></script>
</body>
</html>
Please make sure that <script type="text/javascript" src="/js/js.js"></script> is placed just before </body>.
Try this
var doSomething = function()
{
var paragraph = document.getElementById("testElement");
paragraph.innerHTML = "Test Message";
}
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="js.js"></script>
</head>
<body onload = "doSomething();">
<p id="testElement"> Html text</p>
</body>
</html>
Try saving both the files in the same folder.
Make use of your browsers developer console, to determine whether any errors have occurred.
Regarding 'onload', you can have a look at this link.
This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 4 months ago.
I am new to javascript programming.
When i try to run this code, the default image in html tags shows up.
I used the setAttribute function but it doesn't work. Please Help!
<!DOCTYPE HTML>
<html>
<head>
<title>Javascript</title>
<script type="text/javascript">
var foo = document.getElementById("image");
foo.setAttribute("src", "glasses.jpg");
</script>
</head>
<body>
<img src="awesomesite.gif" id="image" alt="Awesomesite">
<p id="intro">
Hello World
</p>
</body>
</html>
either move the script to the bottom of your page or add the following to your script
document.onload(function()
{
var foo = document.getElementById("image");
foo.setAttribute("src", "glasses.jpg");
});
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<style>
</style>
</head>
<body>
<img src="http://i.stack.imgur.com/xkF9Q.jpg" id="image" alt="Awesomesite">
<p id="intro">
Hello World
</p>
<script>
window.onload = function () {
var logo = document.getElementById('image');
logo.src = "http://www.w3schools.com/html/pic_mountain.jpg";
};
</script>
</body>
</html>
I am trying to add a source to an image through Javascript, and some JQuery code I found on internet, but it doesn't seem to work:
<html>
<head>
<script src = "http://www.example.com/images/">
var count=1;
var initnumber=100;
function changeImage(){
count++;
$("#HTMLPhoto").attr('src'+((initnumber+count).toString)+".jpg");
}
</script>
</head>
<body onload="changeImage()" >
<img id="HTMLPhoto"/>
<button onclick="changeImage()">Next Image</button>
</body>
I am also trying to call once again the changeImage() function with button clicks.
Edit:Managed to make it work, I changed the code a bit, if anyone wants to see:
<html>
<head>
<script>
var count=1;
function nextImage(address){
count++;
image = document.getElementById('HTMLPhoto');
image.src ="http://www.example.com/images/"+(address+count)+".jpg";
}
</script>
</head>
<body>
<img id="HTMLPhoto"/>
<button onclick="nextImage(100)">Next Image</button>
</body>
Change:
$("#HTMLPhoto").attr('src'+((initnumber+count).toString())+".jpg");
To:
$("#HTMLPhoto").attr('src', ((initnumber+count).toString())+".jpg");
<html>
<head>
<script>
function view_more(pg_no){
alert(pg_no);
}
</script>
</head>
<body>
<span onClick="view_more('1')"></span>
</body>
</html>
Here, I can't understand why it say always
[ReferenceError: view_more is not defined]
I got the same problem today.
My situation was like this:
.html file:
<head>
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="js/functions.js"></script>
</head>
<body>
<div class="lc-form-holder">
<form action="#" method="post">
[...]
<span onclick="myFunction();">NEXT</span>
</form>
</div>
</body>
and .js file:
$(document).ready(function() {
function myFunction() {
console.log('click click');
}
});
When I clicked on <span> I got an error Uncaught ReferenceError: myFuncion is not defined.
But when I do this in .js file (no document.ready):
function myFunction() {
console.log('click click');
}
Everything work just fine.
I don't know is this helpful but I wanna share it if someone check this question in future.
Try this first
<body>
<span onClick="alert('1');"></span>
if the above code works then there must exists others javascript which are actually got error prior to execute your code.
<span onClick="view_more('1')">Test</span>
Add text and then click on text
Working at my end
This is my code --
<html>
<head>
<script>
function view_more(pg_no){
alert(pg_no);
}
</script>
</head>
<body>
<span onClick="view_more('1')">gfgf</span>
</body>
</html>
EDIT
try using this code --
<html>
<head>
<script type="text/javascript">
function view_more(pg_no)
{
alert(pg_no);
}
</script>
</head>
<body>
<span onClick="javascript:view_more('1');">gfgf</span>
</body>
</html>