HTML File Not Recognizing Functions Defined in external linked js file? - javascript

I am just starting to learn some programming for the first time and had a question I was hoping someone could help with, hopefully nothing too obvious I am missing.
(Revised Explanation Including Code Samples)
I am using a button to change the inner-html of an element, but I am trying to do the same thing in three ways. For the first way, I can do it. For the second two, I am having trouble and was looking for guidance:
First way I am doing is changing the innerhtml of a paragraph element, by clicking a button that has a statement defined directly behind the onclick event attribute for the button. This is working, code I use can be seen below:
<p id="change1">Does the button below change my text when I click it, based on entering a js function directly behind an onclick event entered as a button attribute?</p>
<button type="button" onclick="document.getElementById('change1').innerHTML = 'Yes_1'">See If It Works_1</button>
Second way I am trying to do this is by using a button that calls a function I defined within a script tag in my html file. The function I defined is supposed to perform the task of changing the innerhtml of the paragraph element I defined. This is not working, code sample can be seen below:
<p id="change2">Does the button below change my text when I click it, based on calling A Function Defined in script tag within My HTML File on with an onclick event?</p>
<button type="button" onclick="internalfunction()">See If It Works_2</button>
<script>
function internalfunction() {
document.getElementById("change2").innterHTML = "Yes_2";
}
</script>
Third way I am trying to do this is the same as the second way, only instead of calling a function defined within a script tag in my HTML file, I am calling one I defined in an external js file. This file however sits in the same directory as my HTML file on my computer. This was is also not working right now. Sample of my code, and the way I linked to the js file can be seen below:
Here is the code in my HTML file:
<p id="change3">Does This Button That Calls A Function Defined in My External JS File Work?</p>
<button onclick="externalfunction">See If It Works_3</button>
here is the function I want to call in my external js file:
function externalfunction(){document.getElementById("change3").innerHTML="Yes_3"};
here is the way I linked to my js file, entering this within the head of the html file:
<script src="javascript.js"></script>

Per some help on the help on the comments and some more review this was confirmed a typo issue where () were omitted to call a function and innerHTML had been misspelled.

Related

How to call a JavaScript function in HTML on load

JavaScript code I am trying to get to call from the HTML.
var ClassList = new Array ["Bio1300","csci12"];
function ClassMenu(ClassList) {
return (ClassList.toString);
};
This is the HTML code I am trying to call the JavaScript function inside of on the load of the page.
<li>
<script type="text/javascript" src="JavaScript InProg.js">
function ClassMenu() {
console.log(ClassList.toString);
}
</script>
</li>
Please help. I have many other functions I am trying to call in this manner that are both arrays and contain mathematical calculations.
There are a few issues with the code snippet you've provided. Firstly, it's considered a best practice to add your <script> tags inside the <head> of the document or at the end of the document when loading JavaScript files. Secondly, your source reference is incorrect. Assuming the JavaScript file InProg.js is at the same directory level as your HTML file, you could change your script link to something like this:
<script src="InProg.js"></script>
Once you've ammended how you're loading the JavaScript file into your page, you can simply make a call to the function inside another <script> tag from anywhere on the page, like so:
<script>ClassMenu(params);</script>
Also, I'd recommend adding the console.log statement to the function you're calling.
Hopefully this helps.

How to put a file input anywhere in the DOM with p5.js

I am using createFileInput() from the P5.js library. More info on that here.
function setup() {
noCanvas();
var fileInput = createFileInput(addedFile);
}
When I use this in my setup function it simply adds the element to the end of the HTML page. I cannot figure out how to place the input anywhere within my page, like between some span tags.
I've tried .html(), .value() and even tried placing it directly inline in the HTML file but I cannot get it to appear where I want it. Usually it just disappears or I get an error.
I've tried using this tutorial and looking at the js to figure out how he placed it in the middle of the page but I can't even find that!
Any help on this would be much appreciated!
Your first stop should be the reference.
Specifically, it looks like the parent() function does what you want: it takes an element you created in your P5.js code (in your case, your fileInput variable) and moves it into a parent element in the HTML webpage.
So your first step would be to create an html webpage that contains an element (probably a <div>) in the middle of the page. Then you'd write P5.js code that calls the parent() function and passes in the id of that <div> element.

Implementing FileSaver.js saveAs() function into HTML script

Right now I am attempting to save information from an HTML page that I am creating to a text document, using javascript and the FileSaver.js package. I am not very well versed in HTML and am completely new to javascript, so odds are that I am making some egregious mistake. At the moment, I have eligrey's FileSaver.js file in the same directory as the HTML file that I am working from, so I should be able to call it simply as "FileSaver.js" in HTML.
Right now I am working from something like this:
//some irrelevant text
<script src="FileSaver.js">
function download(){
//alert("hello world");
//this alert line was to test the function call
//the alert actually appears when the <script> tag
// has no src field labeled. Just an observation.
var blob = new Blob(["Hello World"],{type:"text/plain;charset=utf-8"});
saveAs(blob,"helloworld.txt");
}
</script>
//some more irrelevant text
<input type="button" value="download" onclick="download();"/>
/*from this button I want to gather information from input text fields on the page.
I already know how to do that, the problem is creating and, subsequently,
downloading the text file I am trying to create. For simplicity's sake, the text I am
capturing in this example is hardcoded as "hello world"*/
//last of irrelevant text
//oh, and don't try to run this snippet :P
I also have eligrey's Blob.js file available in my immediate working directory as well, just in case.
As of now, the button does nothing. I am fairly sure that I am calling the function correctly considering I could receive the javascript alert text, at least when the script tag had no src. If I do add a src, absolutely nothing happens. The browser that I am testing from is the latest Google Chrome stable build (43.0 I think) on Windows XP. Please inform me of anything that I am missing and/or doing wrong. Thanks in advance
You cannot have a script tag with a src attribute and content inside the tag. Split it into two separate script tags. See What if script tag has both "src" and inline script?
Note that <script> cannot be a self-closing tag
<script src="FileSaver.js"></script>
<script>
function download(){
//alert("hello world");
//this alert line was to test the function call
//the alert actually appears when the <script> tag
// has no src field labeled. Just an observation.
var blob = new Blob(["Hello World"],{type:"text/plain;charset=utf-8"});
saveAs(blob,"helloworld.txt");
}
</script>

Javascript doesn't recognise items entered into DIV Using XMLHttpRequest

Having searched the site, I think the issue I'm having may relate to using innerHTML to populate a <div> but I can't quite find a solution that I can map onto my specific issue. Hope someone can help. Basically, I have an HTML page that contains a form with a text field. The page also contains an empty <div> which will be populated with a table-of-contents in a moment. The <div> is defined as:
<div id="toc_menu" class="menu_list">
I've set the onkeyup attribute of the form text field to run a Javascript function (defined in the HTML <head>) which defines a XMLHttpRequest and sends the value entered in the text input field (str) to a PHP page using xmlhttp.open("GET","toc_items.php?filter="+str,true). The PHP page GETS the value of 'filter' and runs a MySQL query. It then produces some results which are echoed back to the empty as a table-of-contents with main headings and subheadings using:
document.getElementById("toc_menu").innerHTML=xmlhttp.responseText;
This works more-or-less as expected. The length of the returned table-of-contents changes as text is entered into the text field. There is, however, a problem. This table-of-contents is supposed to have an accordion effect created using a script which is defined in the HTML <head>. The script was developed by Roshan Bhattarai and works beautifully when the table-of-contents list is hard-coded into the HTML page. The script is as follows:
<script type="text/javascript">
<!--
//---------------------------------+
// Developed by Roshan Bhattarai
// Visit http://roshanbh.com.np for this script and more.
// This notice MUST stay intact for legal use
// --------------------------------->
$(document).ready(function()
{
//slides the element with class "menu_body" when paragraph with class "menu_head" is clicked
$("#toc_menu p.menu_head").click(function()
{
$(this).css({backgroundImage:"url(down.png)"}).next("div.menu_body").slideToggle(300).siblings("div.menu_body").slideUp("slow");
$(this).siblings().css({backgroundImage:"url(left.png)"});
});
});
</script>
The table-of-contents items that are formatted as follows:
<p class="menu_head">HEADING</p>;
<div class="menu_body">;
SubHeading';
</div>;
It appears that the table-of-contents items that are inserted into the <div> don't trigger the Javascript in the HTML page <head> (although the text is formatted correctly using CSS files also defined in <head>). I can manually copy the output from the PHP page and paste it into the <div> and the accordion effect works perfectly.
Any suggestions would be greatly appreciated.
It appears that the code block:
<p class="menu_head">HEADING</p>;
<div class="menu_body">;
SubHeading';
</div>;
is echoed back by PHP from the ajax call. Correct me if I'm wrong on that. If the ajax call builds this html and echos it to the screen, the above script will not work. The ajax call is made via the keyup event on the form as you stated above. However, the script above is run on
$(document).ready. If what I'm understanding is true, the content is placed in the innerhtml of the div when the ajax call is made not when the page loads. Because there are no "p" elements with the class "menu_head" when the page loads on $(document).ready, jquery cannot bind the .click event properly. The script needs to be executed after the ajax call returns and the DOM has been updated with the new elements.
In other words on successful return from the ajax call, run the above script, not on $(document).ready. Once the elements are in the DOM, jquery can find them and bind to them the .click event. The script execution should then complete successfully.
Hope this helps.
I haven't studied your code in detail, but did notice your empty div element has no close tag (unless you've omitted this detail). You should always have a close tag (for div elements) to ensure the DOM doesn't make an invalid assumption as to where this should be inserted, use:
<div id="toc_menu" class="menu_list"></div>

Executing function on a click event in a mustache template

I have a page that is driven by a mustache template (along with javascript and jquery), and I can't figure out how to insert a function into this template. Essentially what I want is to add a link or button to the page that executes a function, "onTaskSelected(taskId)", when the user clicks on it. I've been searching for a way to accomplish this for several days now, and extensive mustache documentation/support/examples are woefully hard to find. Does anyone know how this could be accomplished?
Edit - Here is some of the code that I've tried:
data["B" + task.taskId] = {
changeTask : function(taskId) {
var self = this;
self.onTaskSelected(taskId);
},
taskId : task.taskId
};
Data gets loaded into the mustache template, which has the following within it:
<button onClick="{{#B8.changeTask}}B8.taskId{{/B8.changeTask}}">Change to task 8</button>
I've debugged the code to the point where data gets sent to the template to be converted to html, and B8 has set both changeTask and taskId correctly. However, by the time the html is displayed, the button looks like this:
<button onclick>Change to task 8</button>
Why is the onclick getting zapped, and how can I fix it? It doesn't need to be a button, but I do need a clickable element on the page with that text.
Update: I have since updated my template as follows:
<button onClick="{{#B8}}{{#changeTask}}8{{/changeTask}}{{/B8}}">Change to task 8</button>
Apparently I needed to nest my data templating in order to access the variables inside the "B8" object. However, now the problem I have is that it's trying to execute the "changeTask" function when it creates the html from the template. How can I get it to wait to execute until I click the button?
Finally got it working, but I ended up going a completely different route. Wanted to post it here in case anyone else had the same problem. I formatted the mustache to give the button a name rather than try to insert the onClick method, then I cycled through every button in that section of the DOM using jquery and add an onClick method to the buttons that had the right names.
Edit: Technically I also changed my buttons to links, which I'll show in the code below, but it should also work for buttons as well.
template:
<a name="{{{B8}}}">Change to task 8</a>
jquery (partial example):
$('a[name="' + buttonData[B8].name + '"]').click(function() {
self.onTaskSelected(buttonData[B8].taskId);
});
Hope that is helpful for others.
While your own answer is correct in essence, there is an easier option to select with jQuery:
$(link+'[name|="'+buttonData[B8].name+'"]')
Hope this helps u in the future.
Btw - I am myself still searching for a solution to the original problem...

Categories