I have been trying to call a single property from an object from an external .js file into an HTML table cell. My code is as follows:
This is from the external .js file "script.js"
var shortsF = new Object ( );
shortsF.description = "Stone Wash Denim Shorts";
shortsF.stockLevel = 20;
shortsF.price = 25.9;
This is a part of the index.html file:
<html>
<head>
<script src="script.js" type="text/javascript"></script>
</head>
<body>
<table>
<tr>
<td><script>document.write(shortsF.description)</script></td>
</tr>
</table>
</body>
</html>
This works when the object is initialised locally in the HTML file but not in the external .js file - I must be missing something simple but I can't figure it out at all!
Many Thanks,
Matt
i saved your two snippets into script.js and index.html and it worked as is. So there is something else you are doing that's breaking it.
as an aside, that's not a good way for inserting text into the DOM
It looks fine. Is script.js in the same directory as the html file? That's where your HTML expects it to be. If they're in the same place and everything is written as you posted, it ought to be working fine.
If you want to get more fancy, you can look into using your script as a module: https://developer.mozilla.org/en-US/docs/Mozilla/JavaScript_code_modules/Using?redirectlocale=en-US&redirectslug=JavaScript_code_modules%2FUsing
Related
This is a general question for which I have searched high and low to no avail, and would greatly appreciate any input.
I have a html/javascript educational quiz that loads a separate js file to retrieve an array to determine the content of the quiz. For example this retrieves the js file with an array of hard level math problems
<script type="text/javascript" src="../js/arrays/math-hard.js"></script>
I have a number of js files with arrays of different content. Another one might load English questions, etc. I need to have a variety of these quizzes, all launched from separate links in different sections of an overall interface.
Currently to create a new quiz I am duplicating the html file and changing the reference to point to the requisite js file for the array.
I would much prefer to have a single html file, and simply write different links that all load that same single html file, but dynamically substitute one of the other js array files to change the content. I cannot figure out how to do this, nor have I been able to find a published solution anywhere.
At the moment the html file is written such that it only references one of the js files that have the arrays, but it's fine to include links to all of them in that single file if that's necessary as part of achieving this functionality.
Currently I have a single html file (stripped down)
<!doctype html>
<html>
<head>
<script type="text/javascript" src="../js/quiz.js"></script>
<script type="text/javascript" src="../js/gridquiz/s-english-easy.js"></script>
</head>
<body>
<div id="gridQuizContent" class="quiz-content">
<div id="divClick" class="quiz-click"></div>
</div>
</div>
</body>
</html>
and it load that english-easy.js, that looks basically like this (simplified)
Quiz.easy = [
['hi-IN', 'dog', 'cat', 'pig', 'cow'],
['hi-IN', 'me', 'you', 'he', 'she'],
['hi-IN', 'up', 'down', 'in', 'out'],
['hi-IN', 'hot', 'cold', 'big', 'small'],
];
And I want to write many links that simply load the same html file but change this line
<script type="text/javascript" src="../js/gridquiz/s-english-easy.js"></script>
as it loads to reference a different array.
If each quiz URL looks similar to the following:
https://quiz.com/quiz.html?quiz=math-hard
https://quiz.com/quiz.html?quiz=math-easy
https://quiz.com/quiz.html?quiz=history-hard
Then you could possibly dynamically load the desired JavaScript file in a 'base' JavaScript file for quizzes by checking the URL path:
// base.js
function dynamicallyLoadScript(url) {
// create a script DOM node
var script = document.createElement("script");
// set its src to the provided URL
script.src = url;
/* add it to the end of the head section of the page (could change 'head'
to 'body' to add it to the end of the body section instead) */
document.head.appendChild(script);
}
let params = new URLSearchParams(location.search);
if (params.has('quiz')) {
dynamicallyLoadScript(params.get('quiz') + ".js");
}
So the HTML of https://quiz.com/quiz?quiz=math-hard would be similar to:
<!doctype html>
<html>
<head>
<script src="../js/base.js"></script>
<!-- Added by 'base.js' -->
<script src="../js/arrays/math-hard.js"></script>
</head>
<body>
</body>
</html>
Personally I would use JSON files to realize this. I found a tutorial on this website, which follows the same problem "how to store quiz questions".
I've been trying to import a html form and embedded it into a separate html file, my javascript to try and upload the file containing the form looks like this
<link rel="import" href="formhtml5.html" onload="handleLoad(event)"
onerror="handleError(event)">
var link = document.querySelector('link[rel="import"]');
var el = link.import.querySelector('#flexyForm');
document.body.appendChild(link);
however when I try and see if the form is uploaded my page is just blank? been struggling with this for days now and its driving me nuts, anyone got any guesses to see how it works?
If this is what you're looking for, it's possible with jQuery.
firstFile.html
<html>
<head>
<script src="jquery.js"></script>
<script>
$(function(){
$("#includeForm").load("formFile.html");
});
</script>
</head>
<body>
<div id="includeForm"></div>
</body>
</html>
formFile.html
<p>This is my Form</p>
Note: Your question is not clear, you're not uploading anything. Instead you're just importing some lines of code from another html file to yours. If yes, above code should work fine!
Also, If the included HTML file has CSS attached to it, it might mess up your page style. So better to do internal CSS or change the CSS external link in formFile as per link rules of firstFile.html
You can also use php in additional to JS to get the content of the second file.
<?php file_get_contents="path to your file here" ?>
In C I'm accustomed to do something like:
//MyHeaderFile.h
#define MY_CONSTANT 34
//MyMainFile.c
#include MyHeaderFile.h
int num = MY_CONSTANT;
I want do something in an html document like:
//MyJS.js
#define MY_SCRIPT <script>some javascript stuff </script>
//MyHTML.html
<html>
MY_SCRIPT
</html>
This html would execute whatever script code was defined as MY_SCRIPT. Basically What I want is to have multiple .html files reference the javascript code, all of them executing the same code defined in the .js file. It would just be nice to be able to change the code in the .js file once and have it affect all of the html files at once.
Any ideas?
Reference your JS file in a script element as such
<script src="(LOCATION OF JS FILE)"></script>
This will cause the Javascript code to execute when the element loads.
Check out this tutorial for more info
http://www.w3schools.com/tags/tag_script.asp
You can have many files as you want. For example in a file called "header.js" you can put this:
var MY_CONSTANT = 34;
And in your html file simply put the reference to that file:
<script type="text/javascript" src="header.js>
<script type="text/javascript">
//You can use MY_CONSTANT here
var myNumber = MY_CONSTANT;
</script>
You can have many files as you want, but be sure to put the header.js before another scripts
This might sound stupid, but actually I'm trying to use an external hide.js javascript file inside another myfile.html file. Here are the simple codes:
myfile.html:
<html>
<script src="hide.js" type="text/javascript"></script>
</html>
hide.js:
function fun()
{
document.write("Hello!");
}
I have saved both files in the same folder.
The problem is, when I run the myfile.html, it should display "Hello!". But it doesn't display anything. Where's is the problem?
just display the message without using the function in your hide.js file
myfile.html
<html>
<script src="hide.js" type="text/javascript"></script>
</html>
hide.js
document.write("Hello!");
I have a .json file in a bucket on S3. I'm trying to parse information from the file, a date and a SigninSim. I am doing this through an html file which once I get this figured out will take that parsed information, go into another folder, and display some pictures. Here is the code that I currently have written.
<!DOCTYPE html>
<html>
<head>
<script src="https://s3.amazonaws.com/'BUCKET'/browser.json"></script>
<script type="text/javascript">
function parseJSON()
{
var info = JSON.parse(browser);
document.write(info.date);
document.write(info.SigninSim);
}
</script>
</head>
<body>
<script type="text/javascript">
parseJSON();
</script>
</body>
</html>
When I run this nothing shows up on the page. Any ideas? I'm also very new to html/javascript so I could be doing something completely wrong, anything helps!
<script> tags can only be used to execute Javascript code, not to read JSON files.
Change the JSON file to a Javascript file that creates global variables or objects.