I am trying the following to write the contents of a local text file (version.txt) to the screen, but it isn't working.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<script charset="utf-8" src = "jquery-1.10.1.min.js"></script>
<script charset="utf-8" src = "cordova-2.7.0.js"></script>
<script>
function test()
{
$.get("version.txt", function(data) {
document.write(data);
});
}
</script>
<body>
<button type="button" onclick="test()">Print version.txt</button>
</body>
</html>
Any idea what I'm doing wrong?
update: this works, I was just mistyping the name of the jquery file I was including.
You're missing a closing brace. The console will clearly tell you about invalid Javascript if you look.
You can't use document.write after the page has loaded. (Well you can, but you won't get the result you want.) Use jQuery append() instead.
I don't know wheater it is typo or not you are missing closing brace for function test
<script>
function test()
{
$.get("version.txt", function(data) {
document.write(data);
});
}
</script>
Related
I'm learning to use event listeners, I wanted to log pressing the "Start" button to the console to make sure the button works but I'm not getting any results when I test the .html file in devtools.
I've verified the index.js name referenced in the .html file is the same
I've tried the source code in the header
I've added the src=index.js jQuery library through Google to the bottom before </body>
I've copied the code to repl.it to try a different environment
JAVASCRIPT:
function startQuiz() {
$('#startButton').click(function(event){
console.log("Keep Going");
});
}
HTML:
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Herbal Medicine: Adaptogens</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<link rel="questions" href="store.html">
</head>
<body>
<div class="container">
<p>Intro to Herbal Adaptogens explaining what they are</p>
<button id="startButton">Start</button>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="index.js"></script>
</body>
</html>
I expect the to see "Keep Going" in the console when I press "start" but instead nothing happens at all.
You have the JQuery click() function inside the startQuiz() function. So it won't work unless the outer function (startQuiz()) is run first. You should put it inside a ready function so that it loads once the page is 'ready'.
Change your javascript to look like this:
$(document).ready(function() {
$('#startButton').click(function(event) {
console.log("Keep Going");
});
});
No need to go with jQuery , you can just use js events.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Log Window</title>
</head>
<body>
<script>
function logMe() {console.log('clicked');}
</script>
<button onclick="logMe()">logMe</button>
</body>
</html>
You should put it inside a Jquery click function. This way it will fire when the document loads.
$(document).ready(function() {
$('#startButton').click(function(event) {
console.log("Keep Going");
}
});
I am trying to learn about p5 and have been going through the tutorials (https://p5js.org/reference/#/p5.SoundFile).
function preload() {
soundFormats('mp3', 'ogg');
mySound = loadSound('assets/cam.mp3');
}
function setup() {
mySound.setVolume(0.1);
mySound.play();
}
I have followed the documentation verbatim, except for the fact that I switched in my own test song. When I run this on my repl.it https://repl.it/#JacksonEnnis/Coloquial I get an error stating "ReferenceError: soundFormats is not defined". However, I know that this function IS defined, because it is from the documentation. I have googled the problem, but it does not seem like it is a common issue to experience.
If anyone understands why this is happening, please explain it to me so I may learn.
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<script language="javascript" type="text/javascript" src="path/to/p5.sound.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.js"></script>
<script src="script.js"></script>
</body>
</html>
Just to sum up the comments.
Here's the solution that works:
<!doctype HTML>
<html>
<head>
<html><head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.16/p5.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.16/addons/p5.sound.js"></script>
</head>
<body>
<script>
function preload() {
soundFormats('ogg', 'mp3');
mySound = loadSound('https://ia802508.us.archive.org/5/items/testmp3testfile/mpthreetest.mp3');
}
function setup() {
mySound.setVolume(1);
// mySound.play();
mySound.loop();
}
</script>
</body>
</html>
as you can see: the p5.sound.js file has to be included as well. It has to be a valid path and it has to be loaded after the p5.js.
soundFormats is a function defined in p5.sound.js. And if this javascript file has not been loaded properly, an error message "soundFormats is not defined" comes up.
I've read a bunch of different posts and I can't figure out why this isn't working for me. Any help would be greatly appreciated. I'm sure it's something simple.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<script type="text/javascript">
$("body").children().each(function() {
$(this).html($(this).html().replace(/®/g,"<sup>®</sup>"));
});
</script>
</head>
<body>
<div>HelloWorld®</div>
</body>
</html>
you must wait after page ready so add your function inside $(document).ready(function(){....}) or move your <script>...</script> tag as last element inside <body>...</body>
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div>HelloWorld®</div>
<script type="text/javascript">
$("body").children().each(function() {
$(this).html($(this).html().replace(/®/g,"<sup>®</sup>"));
});
</script>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("body").children().each(function() {
$(this).html($(this).html().replace(/®/g,"<sup>®</sup>"));
});
});
</script>
</head>
<body>
<div>HelloWorld®</div>
</body>
</html>
I have tested your code and it works for me. I output to the console the contents of the element before and after modifying them:
$("body").children().each(function() {
console.log($(this).html());
$(this).html($(this).html().replace(/®/g,"<sup>®</sup>"));
console.log($(this).html());
});
And the result is:
HelloWorld®
HelloWorld<sup>®</sup>
Check it here:
https://jsfiddle.net/m6kLgpj7/
Are you getting a different result? What is the problem you are observing?
To be honest I would probably just target the element by giving it a unique ID rather than iterate over every element in the body. However since that is the approach you asked about, this is how I would do it:
$(document).ready(function() {
$("body").children().each(function(idx, elem) {
var newHtml = $(elem).html().replace(/®/g, "<sup>®</sup>");
$(elem).html(newHtml);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<title>Untitled Document</title>
<body>
<div>HelloWorld®</div>
</body>
I think it's more clear when you use the second parameter that the jQuery each method provides (the element), rather than using 'this' all over the place....just my personal preference.
Also, take note of the document ready method i placed the rest of the script in to ensure. This ensures the script does not manipulate the DOM until the DOM is ready.
I am trying to learn how to debug jquery. I tried to make a page which will dynamically add input feilds. The data is sent to the jquery. Now for debugging, I tried to console.log the whole array, but I am getting this error in Firefox:
[17:40:27.073] The character encoding of the HTML document was not
declared. The document will render with garbled text in some browser
configurations if the document contains characters from outside the
US-ASCII range. The character encoding of the page must be declared in
the document or in the transfer protocol. #
file:///Users/ateevchopra/Desktop/takemehome%20dynamic/TakeMeHome/index.html
Please explain what this means of if there is some mistake in my code. Heres my code
HTML:
<!doctype html>
<html>
<head>
<title>TakeMeHome</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.1.custom.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<script type='text/javascript' src='js/app.js'></script>
</head>
<body>
<center><form id="details">
Your Place:<input id="source" type="text"><br><br>
Friend1:<input id="friend1" type="text"><br><br>
<div id="friends"></div>
<div id="button">Add!</div><br><br>
<input type="submit" value="go">
</form>
</body>
</html>
jQuery:
var j=2;
var friends = [];
$(document).ready(function(){
$('#button').click(function(){
if(j<11){
$('#friends').append('Friend'+j+':<input type="text" id="friend'+j+'"/><br/><br/>');
j++;
}
else
{
alert("Limit reached");
}
});
});
$("form").submit(function(){
friends[0] = ('#source').val();
for(var i=1;i<j;i++)
{
friends[i] = ('#friends'+i+'').val();
}
console.log(friends);
});
your code is working perfectly you can see it from this
console.log is good for debuging but i prefer you to use firebug for debuging.
Using firebug you can debug each and every line and you can also view the values of each variable.
I am using firebug with firefox.
You can download firebug for firefox from that link .I hope that it helps you.
The error has nothing to do with JavaSCript.
If you add a meta tag like <meta charset="UTF-8" /> it should be fixed.
I also see the you have a type in doctype declaration.
This is not an error in your Javascript code, but a general warning issued by Firefox regarding the validity of the actual HTML markup.
The document's encoding should be declared with a meta tag in inside the header tag. For example, if your encoding is UTF-8 it would be:
<head>
...
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
...
</head>
Since your doctype is HTML5, you can also use the charset attribute:
<head>
...
<meta charset="UTF-8">
...
</head>
I'm encountering a problem where my body onload="constructor()" is not being run. It works fine for me in firefox but I don't understand why it's not working for me in chrome. Here's the code I'm working with, I made a separate file and deleted everything to the bare minium to try figure out what was going wrong:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Personality Font</title>
<link rel="stylesheet" type="text/css" href="p1.css" />
<script type="text/javascript" src="data.js"></script>
<script type="text/javascript">
//<![CDATA[
function constructor(which)
{
console.log("IN CONSTRUCTOR"); //In Constructor
var text = document.createElement('p');
text.appendChild(document.createTextNode("BLAH"));
document.getElementsByTagName('body')[0].appendChild(text);
}
//]]>
</script>
</head>
<body onload = "constructor();">
<h1>Personal Fonts: Find the Typeface that Matches Your Personality</h1>
<form>
</form>
</body>
</html>
Chrome has a built-in function with the name constructor. Call the function something else.