Understanding "order matters" on external .js files in html - javascript

EDIT:
Okay, gonna try to use as little code as possible to explain my problem.
I have a select dropdown menu that has a function changetext() tied to it. Whenever a value is selected in the dropdown menu, text inside a tag is changed.
The script to the function is stored in an external js file and is placed at the bottom of my html file.
Inside the js file is something like this.
var selectormenu = document.getElementById("selector");
var spanTag = document.getElementById("texthere");
function changetext(){
if(selectormenu.value == "one"){
spanTag.innerHTML = "one";
}
}
By using this js file, I get a TypeError in my browser console. However, if I place var selectormenu and spanTag inside the function, the script works.

EDIT: Since the question case sensitivity was fixed, I am adjusting my answer. You need the DOM element to already be created, because document.getElementById needs to have something to select. Then, your function needs to be named before the parentheses. Finally, you need to call the function, because it won't run unless it's called.
<div id="divid>Hello World!</div>
<script>
var soandso = document.getElementById("divid");
function statsChange() {
soandso.innerHTML = "123";
}
statsChange();
</script>

Related

How do I define a variable in my index.html file? (window.parentPage = true;)

https://stackoverflow.com/a/43635720
On this answer, it says to define a variable (window.parentPage = true;) in the index.html page. How can I go about doing this?
You would need to define the variable using JavaScript. You can embed some JavaScript in the HTML file by encasing it in a script tag like so:
<script type="text/javascript">
window.parentPage = true;
</script>
First you need to clearly realize your reason... what you want to achieve.
After that defining that to yourself:
First option:
You can store/save some data as stated on the link you added to your question inside a tag, like that:
<script>
var myLittleBox = "box content";
</script>
And access it later like:
<script>
myLittleBox = myLittleBox + " extra content";
console.log(myLittleBox);
//this will print "box content extra content"
</script>
You need to use the tag to access the javascript environment.
Second option:
You can save/store data with pure HTML using an with type "hidden" to not show it on screen as an input box, and changing it's value, like that:
<input type="hidden" value="box content">
But this way you'll not be able to access the data directly without aid of javascript code, unless you send this input somewhere reachable as GET or POST within a and recover it getting the respective GET or POST.
Javascript variables:
https://www.w3schools.com/js/js_variables.asp
Ex: https://www.w3schools.com/js/tryit.asp?filename=tryjs_variables
HTML input:
https://www.w3schools.com/tags/tag_input.asp
HTML form handling:
https://www.w3schools.com/php/php_forms.asp
You're probably trying to understand the first option, but you question do not make that clear. Anyway, good studies.
Whatever you do you will have to use JavaScript in order to access the variable. An orthodox way of doing it that is not mentioned yet is using an data-attribute inside the html and than you access it by JavaScript:
const attributeName = 'data-parentPage';
const setup = () => {
let parentPageBool = document.querySelector(`html[${attributeName}]`).getAttribute(attributeName);
console.log(parentPageBool)
};
window.addEventListener('load', setup);
<html data-parentPage="true">
</html>

Manipulating DOM in Javascript not working out [duplicate]

This question already has answers here:
Which characters are valid in CSS class names/selectors?
(11 answers)
Closed 4 years ago.
Hi I'm trying to create a simple calculator website, and I'm trying to manipulate the DOM to display an updating equation, but it won't add the child to the display container.
HTML:
<body>
<div class="body">
<div id="display"></div>
In the Javascript, I have the following code to add an element to the "display" div:
JAVASCRIPT:
const display = document.querySelector("#display");
var eqnDisp = document.createElement("p");
eqnDisp.classList.add("eqnDisp");
eqnDisp.textContent = "DISPLAY SOMETHING";
display.appendChild(eqnDisp);
Am I missing a line? I have the exact code for another page and it works but not here.
The example you provided is finely working:
const display = document.querySelector("#display");
var eqnDisp = document.createElement("p");
eqnDisp.classList.add("eqnDisp");
eqnDisp.textContent = "DISPLAY SOMETHING";
display.appendChild(eqnDisp);
<div class="body">
<div id="display"></div>
</div>
Your <script> tag needs to be placed after the body content, not in the <head> section. This is because you must wait for the DOM to get loaded before you can use DOM methods such as document.querySelector() (i.e. at the point where your script is executing, document is undefined). If you still want your script file in the <head> section, modify it this way:
window.onload = function() {
const display = document.querySelector("#display");
var eqnDisp = document.createElement("p");
eqnDisp.classList.add("eqnDisp");
eqnDisp.textContent = "DISPLAY SOMETHING";
display.appendChild(eqnDisp);
}
However, the code you posted here is not causing the problem. There are many other errors in the JSFiddle you provided. Here are the errors:
let btn1 = document.querySelector("#1");
As stated earlier, this won't work with IDs starting with a number. Correct is using document.getElementById()
btn1.addEventListener("click", include("1"));
This is another mistake. The above line will only call include("1") once, and not on every click. This is not how you pass a parameter to a function inside an event listener. Correct is using
btn1.addEventListener("click", function() {
include("1");
});
...which will call include("1") whenever btn1 is clicked.
btnCLR.addEventListener("click", clearDisp());
If you want to call a function without parameters, remove the brackets. Only call clearDisp, not clearDisp().
equation.concat(value);
equation is a string, not an array. Use the normal addition (concatentation) operator:
equation += value;
Then, you have many functions inside event listeners which you didn't define. Either define these functions, or comment out the whole event listener. You will end up with a working calculator.

Javascript accessing a variable in my html textbox

so I have a js file, lets call it foo.js and it has a variable count; this count is what I want to display in a textbox on the html end, which is a separate file.
How can I make the textbox, reference the variable which constantly is updated per minute?
Here is what I tried so far,
<script type="text/javascript">
var elem = document.getElementById("count");
elem.value = countVal;
</script>
Where I want to show it in HTML:
Shapes:
if I set elem.value to 5, or hello world, it works, but I want to set it to the constantly updating js value in a seperate page. I also tried creating a function in my js file, where I return the variable, and then calling that function in the html tag, but that did not work either.
I am new to JS, and I would appreciate your help.
Thank you.
Edit:
THIS IS NOT for a TIME INTERVAL, I have a variable, that based on some drawings, counts the shapes drawn, and I want to bring that to front end. That count.
MORE CODE:
my function in the .js file
function getShapeNumbers(){
return shapeCount;
}
<script type="text/javascript">
var elem = document.getElementById("shapeCount");
elem.value = getShapeNumbers();
</script>
where I want it displayed
Shapes:<input type="text" size="25" style="width:50px;" id ="shapeCount" />
it returns undefined in the textbox even if I change my function to return 50, it shows undefined. And if I just elem.value to 50, then that works. I want it set to my global variable
Probably your js file is not loaded by the browser yet when you run the code elem.value = newvalue.
Run this only after all document html content be loaded:
window.onload = function(){
document.getElementById('shapeCount').value = shapeCount;
};
Also, consider updating directly input when updating variable.
jsFiddle: http://jsfiddle.net/bx4SU/

Find the div containing the current script [duplicate]

This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
How may I reference the script tag that loaded the currently-executing script?
I am trying to make a javascript function that includes a html doc on a page via AJAX, as a way of making a PHP-esque include() with no serverside interaction. I want the script to include the file at the location on the page the function is called from. Here's my function (assuming ajax is a valid xmlhttp object):
function include(src, elem){
ajax.open('GET', src, false);
ajax.send(null);
elem.innerHTML = ajax.responseText;
}
So this would print the contents of "src.html" in the div when it is clicked:
<div onclick="include('src.html', this);"> </div>
But I want it to load when the page does. Considering there is no onload event for divs I have to include the script in the div, which is fine:
<div id=write>
<script>include('src.html', this);</script>
</div>
But then the script has no reference to the div it is called from. Sure I could put an id on the div and pass that to the function, but I don't want to. I want to be able to call this from any unidentified element. Any ideas?
You could change your div (or other element(s)) to use a data- attribute to specify what script to run:
<div data-include="src.html"></div>
And then run a script onload of the page (or in a script block just before the closing </body> tag) that finds all elements with that attribute.
var elements = document.querySelectorAll("[data-include]");
for (var i = 0; i < elements.length; i++)
include(elements[i].getAttribute("data-include"), elements[i]);
Here's a demo of the above (with a dummy include() function that just puts the required source url string in the element rather than doing Ajax, but it shows the elements are selected correctly): http://jsfiddle.net/nnnnnn/gm2LN/
For simplicity I've used querySelectorAll() to select the elements, but note that it isn't supported in IE7 and older. But obviously you can substitute whatever other element selection method you like if you want or need to support older browsers.
Here:
<div id=write>
<script>include('src.html', this);</script>
</div>
"this" points to the window object.
I think of putting an id to the script element and doing something like this:
<div id=write>
<script id='test'>include('src.html', document.getElementById('test').parentNode);</script>
</div>
Now elem in "include" function will point to the div containing the script element. In this case you are still relying on id but not on the div's side
When the page is loaded, all scripts will be executed sequencially, as soon as they are parsed. Therefore, you just need to get the last script that is apparent in the DOM to get the currently executed script:
var script = document.scripts[document.scripts.length-1];
ajax(url, function successCallback(html) {
script.insertAdjacentHTML("afterend", html);
});
(Demo to test - notice that document.scripts needs FF 9+)
However, I see no reason not to use serverside include().
nnnnnn was on the money, but I modified it ever so softly. I ended up making an include tag with a src attribute. On pageload I loop through all the "include" tags and fill them with the data from their src attribute:
function include(src, elem){
ajax.open('GET', src, false);
ajax.send(null);
elem.innerHTML = ajax.responseText;
}
window.onload = function(){
var includes = document.getElementsByTagName('include');
for(var i = 0; i <= includes.length; i++){
var elem = includes[i];
var src = elem.getAttribute('src');
include(src, elem);
}
}
Then anywhere I want to include a html file I just include my custom element:
<include src='includeme.html'> </include>
In practice this produces a bit of popup but for my application that's fine.
Thanks for the help!

Is it possible to hide two divs from two different .php pages with a unique Javascript function?

I have a button in my index.php that shows a menu and hides the content of the page. However it's suppose to work for two different templates. My function basically looks like this :
function show_menu();
{
document.getElementById('menu').style.display="block";
document.getElementById('content1').style.display="none";
document.getElementById('content2').style.display="none";
}
If I only put one of the content, hide it works. However if I put both contents it doesn't. What's going on? Is that impossible or am I doing something wrong?
I am not sure if I got your issue correctly, but if I do, the problem is, that you cannot set the style of elements that do not exist on your page. You have to check for null values:
function show_menu()
{
document.getElementById('menu').style.display="block";
var content1 = document.getElementById('content1'),
content2 = document.getElementById('content2');
if (content1) {
content1.style.display="none";
}
if (content2) {
content2.style.display="none";
}
}
function show_menu() //Removed the semicolon, could be the culprit causing the problem
{
document.getElementById('menu').style.display="block";
document.getElementById('content1').style.display="none";
document.getElementById('content2').style.display="none";
}
I guess that there is no element with content1 id in one of your templates. Then your code will fail when accessing the style property of a not existing element, halting your script execution and not hiding the content2.
Three possible solutions come to my mind:
Use the same ids in all templates. If both contain a content with the same functional purpose, you should name them the same. Your script will work then with all these templates.
Use different scripts or a variable indicating which template is used so the script can determine the correct ids.
Check for the element's existence dynamically (you always should do):
function show_menu() {
var menu = document.getElementById('menu'),
content1 = document.getElementById('content1'),
content2 = document.getElementById('content2');
if (menu)
menu.style.display="block";
if (content1)
content1.style.display="none";
if (content2)
content2.style.display="none";
}

Categories