same js script does not work on different html pages - javascript

first page of mine located in root folder of the project has name start.html and contains this <script> nodes:
<script src='https://code.s3.yandex.net/web-code/smoothly.js'></script>
<script src="./core/mainStrings.js"></script>
<script src="./chapters/lore/lorescript.js"></script>
this page works completely fine.
second page of mine has name makeCharacter.html and contains this <script> nodes:
<script src='https://code.s3.yandex.net/web-code/smoothly.js'></script>
<script src="./core/mainStrings.js"></script>
<script src="./chapters/makeCharacter/characterScript.js"></script>
i use mainStrings.js to contain all the main data from the input buttons of the pages and using it on other pages. when i try to execute characterScript.js it goes out with undefined parameters error. it does not have parameters that is holded in mainStrings.js. i think that mainStrings is not loading on the page and have no clue why.
error when code executing is here
structure of files is here

Related

Write hyperlink so that an html file loads but internal link to js file changes

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".

Unable to get Javascript file to run on page

I'm not good with script and I can't figure out what's going wrong with my execution.
The webpage is http://snmcsupport.com/map-js-test-page and it should be running a script that produces a clickable map. The script itself is extremely long so I won't paste it here, but you can see it if you click here
On my webpage, I have the markup necessary to run the script in the header
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>
<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.4/raphael-min.js">
</script>
<script src="//cdnjs.cloudflare.com/ajax/libs/qtip2/2.1.1/jquery.qtip.min.js">
</script>
On my webpage, I call the script
<div>
<script type="text/javascript" src="http://snmcsupport.com/wp-includes/js/app.js">
</script>
</div>
But I still can't get the code to run? The initial instructions from the developer also said:
The last step is to initialize the map by making the following script calls:
<script>makeaClickableMap.initialize(<your-document-object-model-handle>);</script>
where your-object-document-model handle can be anything actually:
a jQuery object like $("#map")
a Javascript Document Object Model like document.getElementById("map")
or a simple string like "map"
but I can't figure out what that means. If I try to put in the initialize command in my webpage I get a nasty cross-scripting error and it won't let me.
I'm running this on Wordpress using a Divi Child theme.
makeaClickableMap.initialize(<your-document-object-model-handle>);
//this is the element that will --^
//be used to contain your rendered map
The method makeClickableMap.initialize() expects you to pass it a reference of an HTML element where you want the map to appear. Elements can be identified by
their tag name (div, p, h1, etc.)
a class name <div class="className></div>
OR by id name, which I will demonstrate here:
Firstly, you;ll need an element with an ID associated with it, it should be placed inside the <body> tag:
<div id="map"></div>
underneath this tag, but still within the body tag, you'll need to include the makeClickableMap.initialise call and pass in the ID of this <div>:
<!-- Javascript solution: -->
<script>
makeaClickableMap.initialize(document.getElementById('map'));
</script>
<!-- notice that the id is just 'map' here -->
An alternative to the Javscript solution above is using jQuery as follows (you'll still need the div with the ID):
<!-- jQuery solution: -->
<script>
makeaClickableMap.initialize($('#map'));
</script>
<!-- notice the ID is prefixced with a '#' character-->

Does jQuery have to be written in the <script> tags in HTML?

I'm learning jQuery, and I'm running into a small problem. jQuery code works when I put it directly in my tags in my HTML, but when I import it from a different file, nothing happens. These are my script tags in HTML:
<script type="text/javascript" src="scripts/jquery-1.10.2.js"></script>
<script type="text/javascript" src="scripts/test.js"></script> <!--This is my jQuery code-->
test.js contains the following code:
$(document).ready(function(){
console.log("Hello");
});
When the page loads, the console is empty. However, when I paste the following code as so, in my html document, everything works fine.
<script>
$(document).ready(function(){
console.log("Hello");
});
</script>
Do you really have a folder named scripts in the folder where your HTML files exist? Otherwise try changing this src="scripts/jquery-1.10.2.js" to probably this: src="/scripts/jquery-1.10.2.js"
You can check by browsing to http://yoururl/scripts/jquery-1.10.2.js, the Jquery code should show up. If it's not there, you have to make sure that you include the right folder/file.
Yes.You will be able to push your scripts in 2 ways::
1-push your scripts in tag like>>
<script>$(document).ready(function(){alert("Welcome Dear");});</script>
2-push your inline scripts with attributes like>>
<button type='button' onclick="$(this).hide()">Hide Me</button>
make sure that the scripts folder contain test.js make sure that the extension is correct ..sometimes I make the same same mistake, instead of test.js i save it as test.js.txt
Try putting
<script type="text/javascript" src="scripts/jquery-1.10.2.js"></script>
in the body rather than the head.
Credits to this answer for giving the idea

Uncaught ReferenceError $ is not defined

I'm very new to JavaScript (just started a few hours ago and trying to get a script working). I went through a few tutorials on W3 and the 'hello world' code works when I paste it directly into my HTML but I'm having a problem with a script (I've had problems with other scripts as well but I am not sure what I'm doing wrong).
I have this code that I want to test in my HTML, I copied the HTML in and it looks the same then I made a file in my static folder called edit.js and copied the JavaScript into it (exactly as shown). It didn't work no errors on the page but when I click it nothing happens. I tried to paste a W3 'hello world' code in and that worked but this script does not.
I tried to inspect the code in Chrome and that's where I see the above error (under the resources tab). I can open the js file using Chrome which makes me think the js file is accessible and pointing correctly but I'm not sure how to get it working. I'm using Jinja2 as my template engine to render the HTML and in my header I have:
<script language="JavaScript" type="text/javascript" src="static/edit.js"></script>
and in my main template (the one that gets rendered on all pages) I have:
<script language="JavaScript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
edit.js:
(even putting it within the script tag directly on the page I want to use it on doesn't work)
$('#editvalue').click(function(e){$('#storedvalue').hide();$('#altervalue').show();});
$('#savevalue').click(function(e){
var showNew = $('#changevalue').val();
$('#altervalue').hide();
$('#storedvalue').show();
$('#storedvalue span').text(showNew);
});​
HTML:
(it's embedded in a larger page)
<head>
<script language="JavaScript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script language="JavaScript" type="text/javascript" src="static/edit.js"></script>
</head>
... my html code..
<div id="wrapper">
<div id="container">
<div id="storedvalue"><span>Hello</span> [edit]</div>
<div id="altervalue" style="display:none;"><input type="text" name="changevalue" id="changevalue" value="Hello"> [save]</div>
</div>
</div>
I have never been able to successfully run a JavaScript that wasn't on W3 yet. I get the same problem with other scripts even though I see people online saying they work fine for them. Do I need to do anything extra to make this work?
My two questions are:
What am I doing wrong?
Because Javascript seems to just not work when there's a problem, is there a way to get errors or information on what's actually wrong?
I read Uncaught ReferenceError: $ is not defined? and have been trying to figure this out for the last hour and can't see my problem.
First you need to place the jQuery script tag first.
Second, you need to do one of the following things:
Put your code within this function:
$(document).ready(function(){/*CODE HERE*/});
Or like this:
$(function(){
/*CODE HERE*/
});
The DOM needs to be ready before you can use it. Placing your code within anonymous functions that are executed on the ready event of the DOM is how you can do this.
Edit:
$(function(){
$('#editvalue').click(function(e){$('#storedvalue').hide();$('#altervalue').show();});
$('#savevalue').click(function(e){
var showNew = $('#changevalue').val();
$('#altervalue').hide();
$('#storedvalue').show();
$('#storedvalue span').text(showNew);
});​
});
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
Script tag for jQuery should come before your custom javascript.
Follow by edit.js
<script type="text/javascript" src="static/edit.js"></script>
Try removing the language attribute..sometimes work for me. It's obsolete now .. i think
You need to include jquery before you can use it.

Grails.pass parameters from the controller to external .js file?

I have controller:
package plugin
class TestController {
def simply = {[name:new Date()]}
}
as you see i pass param name
my view page:
<html>
<head>
<!-- <script type="text/javascript" src="${resource(dir:'resource/js',file:'simply.js')}?color=FA8DFF">-->
<g:javascript>
alert("${name}")
</g:javascript>
</head>
<body>
</body>
</html>
this page run correct - afrer load i see alert window with current date :)
but, when
view page:
<html>
<head>
<script type="text/javascript" src="${resource(dir:'resource/js',file:'simply.js')}?color=FA8DF">
</script>
</head>
<body>
</body>
</html>
and external simply.js file:
alert("${name}")
i see empty alert window. So, my question: how i can pass params to external.js file?
There are two stages in parsing the view when it is displayed to the user. State one is the server executing any code contained in the view page. In your case
${name}
Is turned into the current date since that’s the value from the controller. This means that the text sent to the users browser contains 3/2/2010 instead of ${name}
The second stage that takes place when the user accesses a view is the browser parsing the HTML. The HTML that is sent to the browser depends on what took place on the server. Since in your example the JavaScript is contained in the view ${name} is replaced with the current date on the server. Then JavaScript containing 3/3/2010 is sent to the browser since ${name} was replaced by 3/3/2010 on the server. This means the popup box will contain 3/3/2010. If you include external JavaScript files they never get run through the first step since the browser directly downloads them and does not make a request to the server. This means that the first step never takes place so $[name} does not get replaced with the value from your controller. This behavior is the same weather you use the
<script>
or
<g:javascript>
tag.
In order to pass values from a view into JavaScript located in an external file you should define your JavaScript as functions in external files if you wish to pass parameters. For example in external.js
Function dispDate(theParam)
{
Alert(theParam);
}
Then from your view
<g:javascript src="external.js" />
<script type="text/JavaScript">
dispDate(“${name}”);
</script>
Where external.js is stored in the web-app/js directory.

Categories