Cant get cart to work using external javascript? - javascript

I have been trying to put together this basic cart using external javascript. It works perfectly in jsBin but when I try to run through a browser it wont work. I am guessing it is my html. Any help would be greatly appreciated.
here is my jsBin

The code in the jsBin is executed at the end of the <body>, which means all elements are accessible. Make your code is executed (which accesses specific DOM elements) after they are rendered/ready. A normal way to do this is to put your code in window.onload, or do what jsBin does and put your JavaScript at the end of the <body>.

Related

How can I extract the whole HTML of a page - before and after the DOM?

I'm trying to find a way to extract the HTML code of a web page using JavaScript in two editions:
Before the DOM / Before JS is applied
After the DOM / After JS is applied
All the JavaScript methods that I know just take it from the DOM element, like document.body or document.all... but non of them work specifically for before or after the DOM.
Added:
Just to focus the question further, this is not my page so I can't install any on the page, this is for any random web page.
Can you point me in the right direction? is there a specific method/command/process that is used in JavaScript and can do that? maybe I should stop the page load at specific point and take the code and then let it continue loading and take the code with the JS included?
Well, If you put a <script /> tag in the middle of your HTML your code will get executed before the continuation of the rest of your HTML.
also you can use
document.addEventListener("DOMContentLoaded", fn);
to call your function when the DOM is ready (it comes in the name of the event listener so sorry for over-explaination!)
Getting all the stuff is easy via the window object, can not imagine anything else you might need.
So if you want to do something before the DOM loads just put a <script /> tag at the top. if you want the dom to be ready use the DOMContentLoaded.
You can find great and complete documentation on this subject of script, async, defer on javascript.info. if there is anything that my explanation did not cover for you.

Isotope javascript js basic example not working

I am trying to get Isotope javascript ) to work on a test page.
I am trying to get their example of Filtering with Isotope working. (Stackoverflow not allowing me to post a link as I'm new to posting on here...!)
I have copied their example HTML, CSS and vanilla JS into a test page here on my domain: http://chrislydon.co.uk/testiso.php
(A php file because I want to test adding items from a MySQL DB once the basic thing is working!)
I think I have everything I need: reference to the Isotope JS in the head, their JS copied to between tags - and their exact HTML (and CSS).
I am following the example which was labelled as "Vanilla JS" (as their other examples relies on JQuery (which I will implement eventually...))
I can't see what I'm doing wrong that means this verbatim copy of their example won't work....
(Tried it on different browsers - their examples work in them, but my copied example doesn't)
I'm OK with PHP/HTML but only done basic stuff in JS so perhaps I'm missing something terribly obvious!
Thanks for any help you can offer!
There were two main problems:
1) in the <head> of the document, your <script> tag is missing a >: <script src="https://unpkg.com/isotope-layout#3/dist/isotope.pkgd.js‌​"</script>
Change to:
<script src="https://unpkg.com/isotope-layout#3/dist/isotope.pkgd.js‌​"></script>
2) If the above initializer runs in the <head> of the document, there will be no document available to query and document.querySelector('.grid') will return null.
Instead, put the script just before the </body> tag.
Working jsFiddle:
https://jsfiddle.net/dptve3s6/1
Bonus: You have a function called myFunction attached to a button's onClick event, but that function is not defined anywhere. Define it, and enjoy.

Using javascript on loaded html

I've briefly looked to find any similar questions and found non that are alike or that I understand, so first I apologise if this is a duplicate.
My problem is that I cannot use javascript on loaded (.load) html.
I call a navbar into a div by use of:
$(document).ready(function() {
$('.nav').load("navbar.html");
});
This works perfectly and I have no problems with this.
Problems arise when I want to, for example, add a class to my loaded html code.
The script I currently use (saved in a separate .js file and called at the end of my html code):
$(document).ready(function() {
$('#home').removeClass('active');
$('#profile').addClass("active");
});
Here is what I intended to happen to the loaded html code:
This is part of the navbar and is loaded through the first code snippet ^.
<li id="profile">Profile</li>
After page is loaded: (Added: 'class="active")
<li class="active" id="profile">Profile</li>
(This is part of an unordered list using bootstrap nav-tabs.)
Anyway, when I directly put this code into my html page and remove the import through javascript, I can add class's such as the 'active' class.
Additionally, I have a slider on my page which uses arrows through the use of javascript to 'slide' through the pictures and I experience exactly the same problem:
When the code is imported I cannot edit through use of javascript, but when the code is present in the actual raw html code, I can.
I don't understand why this is as I am fairly new to javascript and its syntax.
Thanks in advance, I'd be happy to answer any questions as I'm sure this isn't exactly clear because I am not entirely sure where the problem lies.
What's likely happening is that your code is trying to operate on the loaded html before it has actually loaded. Try putting it in the complete callback:
$('.nav').load("navbar.html", function() {
$('#home').removeClass('active');
$('#profile').addClass("active");
});
This will make sure that the code runs after the load has completed.

Why will Javascript work in certain locations of the page but not others

I just tried implementing a piece of javascript to my wordpress theme and when I placed it above the content in the header the desired effect wasn't working but once I placed it below the content it worked fine.
Why is this? I"m assuming because it could be conflicting with other JS but how do I troubleshot an issue like this for the future?
Actually you are not using the parent function in which all the JavaScript function will reside.
For example you are writing "$('#btn1').click" directly, you need to use On body load function which will wrap up your JavaScript function.
I we doesn't use the Parent function or the wrapper then the code will get executed only when it's applied at the body section, if you try to apply it from head section then it will not work, for this use the bodyOnLoad().

JS is not loading correctly, where is the fault?

I have a website where I want to use MagicZoom.
Everything would be fine since it is easy to implement, but there seems to be an error when loading the js file.
I will send you the website which is currently under construction.
MagicZoom should be implemented there, where you chose your fabric, for a close-up.
I think, but of course this is only my opinion and I'm not an expert, that the problem occurs because the div container with the picture is created dynamically from another PHP file and not present onload. Therefore the JavaScript does not work properly.
You will see that in the second step the zoom does not load although the class is set correctly.
Your error says "prettyPhoto is not a function". This tells me that some script is trying to use the "prettyPhoto" object before that script has been included on the page.
Looking at your HTML header, I see that is among the last of the <script> tags. Try moving the <script> tag where you include that library in your HTML header up a couple of lines, above some of the other includes. Be aware - you can't move it above the includes for jQuery!
Try that out, let us know.

Categories