Linked JavaScript does not change the html body font
Clash Royale CLAN TAG#URR8PPP
Linked JavaScript does not change the html body font
I am trying to change the font of my header and body contents in my html code using "program1.js" but it does not work. I tried to change the font and add some data to my information such as name, address, job and also one picture of me.
Any help would be appreciated.
html code "aboutme.html"
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>About Me</title>
</head>
<body>
<script src="program1.js"></script>
<h1 id="myP">About Me</h1>
<ul>
<li>Name:<span id="name"></span></li>
<li>Occupation:<span id="occupation"></span></li>
<li>Address:<span id="address"></span></li>
</ul>
</body>
</html>
And program1.js code:
document.getElementById("myP").style.fontFamily = "Impact,Charcoal,sans-serif";
document.getElementById('name').innerHTML = 'Kiarash';
document.getElementById('occupation').innerHTML = 'SQL DBA';
document.getElementById('address').innerHTML = '201 s 4th';
<img id="myImg" src="myimage.jpg" alt="The Pulpit Rock" width="304" height="228">
why is
<img id="myImg" src="myimage.jpg" alt="The Pulpit Rock" width="304" height="228"> in your program1.js?– NoobTW
Aug 6 at 3:05
<img id="myImg" src="myimage.jpg" alt="The Pulpit Rock" width="304" height="228">
program1.js
@PriyankJ, Thanks It worked, I still have a problem with image, How can i add picture with my program1.js?
– Christiano
Aug 6 at 3:12
@NoobTW Thanks for messeging me, I just want to add picture by using my program1.js. exaclty like adding name, job and address but not sure how to do with images
– Christiano
Aug 6 at 3:14
For adding image dynamically to your page, please refer to stackoverflow.com/questions/2735881/….
– PriyankJ
Aug 6 at 3:18
6 Answers
6
Try this:
document.getElementById("myP").style.fontFamily = "Impact,Charcoal,sans-serif";
document.getElementById('name').innerHTML = 'Kiarash';
document.getElementById('occupation').innerHTML = 'SQL DBA';
document.getElementById('address').innerHTML = '201 s 4th';
document.getElementById('myImg').src = "https://androidzone.org/wp-content/uploads/2012/11/logo-android2-720x540.jpg";
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>About Me</title>
</head>
<body>
<script src="program1.js"></script>
<h1 id="myP">About Me</h1>
<ul>
<li>Name:<span id="name"></span></li>
<li>Occupation:<span id="occupation"></span></li>
<li>Address:<span id="address"></span></li>
<img id="myImg" src="" alt="The Pulpit Rock" width="304" height="228" />
</ul>
</body>
</html>
You'll get an syntax error. Please remove <img id="myImg" src="myimage.jpg" alt="The Pulpit Rock" width="304" height="228"> from your program1.js.
<img id="myImg" src="myimage.jpg" alt="The Pulpit Rock" width="304" height="228">
The script will execute until it reaches that line, and since the img tag is last that probably wont prevent it from setting the styles as demonstrated in chrome developer console: prntscr.com/kf43q0
– JasorYEH
Aug 6 at 3:12
@JasorYEH It somehow doesn't work? jsbin.com/zivemisaxu/edit?html,js,console,output
– NoobTW
Aug 6 at 3:14
I guess you are right, maybe chrome dev console works differently, but in the past I saw code behave that way :?
– JasorYEH
Aug 6 at 3:16
@JasorYEH because your case is not a SyntaxError. Your devtool thought
asdfjalsdkg is a function, which is a ReferenceError.– NoobTW
Aug 6 at 3:18
asdfjalsdkg
@NoobTW Thanks for Responding me, I just want to add picture by using my program1.js. exaclty like adding name, job and address but not sure how to do with images. I know how to do it with html but not sure how to do it with program.js
– Christiano
Aug 6 at 3:19
As mentioned in your comments, remove the img from JS because it is HTML not JavaScript. Then, unless you plan to use a document ready listener, you should add the application styling at the end of your body tag so that each of the nodes have already been loaded by the time the JS attempts to access them (and apply styling).
JavaScript is a runtime language, meaning that if you are attempting to access nodes before they have been read (ie. beneath the JS code) in the vertical hierarchy of lines, they will not by default have access to the unloaded aspects.
Use this instead
aboutme.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>About Me</title>
</head>
<body>
<script src="program1.js"></script>
<h1 id="myP">About Me</h1>
<ul>
<li>Name:<span id="name"></span></li>
<li>Occupation:<span id="occupation"></span></li>
<li>Address:<span id="address"></span></li>
</ul>
</body>
</html>
program1.js:
document.getElementById("myP").style.fontFamily = "Impact,Charcoal,sans-serif";
document.getElementById('name').innerHTML = 'Kiarash';
document.getElementById('occupation').innerHTML = 'SQL DBA';
document.getElementById('address').innerHTML = '201 s 4th';
Thanks for respond, How can I add image like adding name, occupation and address, I know I can add it in my html code but not sure how to do it with program.js
– Christiano
Aug 6 at 3:16
And Also I noticed that I need to add the <script> tag right before </body>
– Christiano
Aug 6 at 3:18
The javascript file works after removing the img tag in your program1.js file.
Assuming program1.js is a separate file, and in the same directory as aboutme.html you need to add a script tag to your head, something like this:
program1.js
aboutme.html
<script type="text/javascript" src="program1.js"></script>
<script type="text/javascript" src="program1.js"></script>
Otherwise, if your program1.js is in another folder, use:
<script type="text/javascript" src="./path/to/program1.js"></script>
<script type="text/javascript" src="./path/to/program1.js"></script>
Also, you have an extra <img> in your script, this will cause your script to error when it gets to that, but I don't believe it should interfere with setting the style of your webpage: http://prntscr.com/kf43q0
However, that's based off experience, but probably isn't always the case.
<img>
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
Try adding '<script src="program1.js"></script>' right before the end of <body> tag. Also, you need to set font on 'body' element.
– PriyankJ
Aug 6 at 3:02