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
Related
I was looking at another question and saw that they had been told, when their Javascript was not working, to put a function that started on loading of the page.
I was trying to use this code:(well, not exactly this code, but something like it)
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8">
function doThisWhenLoaded(){
var code = document.getElementsByTagName("body");
code.append("<p>Yes it did.</p>");
}
</script>
</head>
<body onload="doThisWhenLoaded">
<h1 style="font-family:sans-serif;">Did it work?</h1>
</body>
</html>
And nothing happened. All that it did was show the h1 code that I put in there.
Since you are already including jQuery try this
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
var code = $("body");
code.append("<p>Yes it did.</p>");
});
</script>
</head>
<body >
<h1 style="font-family:sans-serif;">Did it work?</h1>
</body>
</html>
You forgot to include the parenthesis to call the function in the body element's onload attribute:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8">
function doThisWhenLoaded() {
//Modified the two lines below slightly
var code = document.querySelector("body");
code.innerHTML += "<p>Yes it did.</p>";
}
</script>
</head>
<body onload="doThisWhenLoaded()">
<h1 style="font-family:sans-serif;">Did it work?</h1>
</body>
</html>
A better/cleaner way to achieve the same thing would be to use addEventListener and DOMContentLoaded event. Something like below:
document.addEventListener("DOMContentLoaded", appendHtml.call(null, {
selector: 'body',
html: '<p>Yes it did.</p>'
}));
function appendHtml(config) {
document.querySelector(config.selector).innerHTML += config.html;
}
<h1 style="font-family:sans-serif;">Did it work?</h1>
Two reason why it doesn't work:
To select the body you have to use document.body or $("body") (in jQuery)
And you forgot to add parentheses to your function call doThisWhenLoaded()
Here is the code corrected:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8">
function doThisWhenLoaded(){
$("body").append("<p>Yes it did.</p>");
}
</script>
</head>
<body onload="doThisWhenLoaded()">
<h1 style="font-family:sans-serif;">Did it work?</h1>
</body>
</html>
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
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...
im trying to call
.bind("click")
from an external .js file (js1.js).
here is the code:
js1.js:
$(function() {
$("p").bind("click",function(){
alert("The paragraph was clicked.");
});
});
page.html:
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="./css/mystyle.css" />
<link rel="stylesheet" href="./css/global.css">
<script type="text/javascript" src="./js/js1.js"></script>
<title>New WebPage</title>
</head>
<body>
<p>Click me!</p>
</body>
this code does not work in my files.
i found it from w3scools and it is working in their site:
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").bind("click",function(){
alert("The paragraph was clicked.");
});
});
</script>
</head>
<body>
<p>Click me!</p>
</body>
</html>
how can i make it running from my external .js? any ideas?
thanks.
By the looks of it, you haven't added jQuery on your page yet. Add jQuery prior to your script.
<link rel="stylesheet" type="text/css" media="screen" href="./css/mystyle.css" />
<link rel="stylesheet" href="./css/global.css">
<script type="text/javascript" src="path/to/jQuery.js"></script>
<script type="text/javascript" src="./js/js1.js"></script>
<title>New WebPage</title>
If you forget to add this line
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
so add it in your <head> </head> section first. Otherwise your script could not work.
Bellow the complete code which working for me..
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#p').bind('click', function(){
alert('The paragraph was clicked.');
});
});
</script>
<style>
#p{cursor:pointer;}
</style>
</head>
<body>
<p id="p">Click me!</p>
</body>
</html>