changing html element value - html

I'm trying to prompt for a value that will replace the value for "data-amount"
<html>
<body>
Bank Account (25¢)
<script type="text/javascript" src="https://www.dwolla.com/scripts/button.min.js"> </script>
</body>
</html>
I've added
<script type="text/javascript">
document.getElementByClass("dwolla_button")[0].setAttribute("data-amount", "43");
</script>
and tried the whole thing in this script below with no success any ideas?
<html>
<body>
Bank Account (25¢)
<script type="text/javascript">
document.getElementByClass("dwolla_button")[0].setAttribute("data-amount", "43");
</script>
<script type="text/javascript" src="https://www.dwolla.com/scripts/button.min.js"> </script>
</body>
</html>


Change your method from getElementByClassName to getElementsByClassName
document.getElementsByClassName("dwolla_button")[0].setAttribute("data-amount", "43");

Related

How to set input value of one html page by clicking element on another html page using jquery?

I have html page name try1.html
<html>
<head>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
crossorigin="anonymous"></script>
</head>
<body>
<div id="join1">Join1</div>
<div id="join2">Join2</div>
<script src="script.js"></script>
</body>
</html>
and another html page name try2.html
<html>
<head>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
crossorigin="anonymous"></script>
</head>
<body>
<div><input type="text" id="val"></div>
<script src="script.js"></script>
</body>
</html>
I wanted to set the input value of try2.html with different value based on what I choose to click in try1.html using jquery(script.js) as below:
$(document).ready(function(){
$("#join1").click(function(){
$("#val").val("Z1");
$(location).attr("href", "try2.html");
});
$("#join2").click(function(){
$("#val").val("Z2");
$(location).attr("href", "try2.html");
});
});
Is there any mistake I have made which causes the value to not change? Thank You...

You can use GET parameter.
$(document).ready(function(){
$("#join1").click(function(){
$(location).attr("href", "try2.html?q=Z1");
});
$("#join2").click(function(){
$(location).attr("href", "try2.html?q=Z2");
});
});
Also you can change your input name.
<div><input name="q" type="text" id="val"></div>
Then you can get parameters.
const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);
const ourValue = urlParams.get('q');
console.log(ourValue); //you can change your input value to ourValue.
document.getElementById('val').value = ourValue;

How to format an html script reference to a folder outside of the parents directory

In an html file, I need to reference a script outside of the html's parents directory. Attached is a picture of the directory. I need to make a script reference from layout.html to js/index.js. I've tried:
<script src = "{{ url_for('shop', filename = 'index.js') }}"> </script>
<script type="text/javascript" src="~/../js/index.js"></script>
<script type="text/javascript" src="../js/index.js"></script>
<script type="text/javascript" src="/js/index.js"></script>
<script type="text/javascript" src="index.js"></script>
<script type="text/javascript" src="~/js/index.js"></script>
But none of these works. Please help!
Directory

Replace yours into this:
<script type="text/javascript" src="/js/index.js"></script>

bootstrap notify not working

I have written a simple example to demonstrate the use of bootstrap notify but its not working.
Below is my code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="bootstrap-notify.js"></script>
<script src="bootstrap-notify.min.js"></script>
<script>$.notify("Hello World");</script>
</head>
<body>
</body>

Replace your script as below just add ready function it work fine. and also add bootstrap css for look good.
<script>
$(document).ready(function(){
$.notify("Hello World");
});
</script>

Can't get Angular2 component to run in Internet Explorer

My Angular2 app runs in Chrome, Firefox, and Safari, but not Internet Explorer. It finds an error in angular2.min.js: SyntaxError: Expected ';'
Here's my HTML file:
<!DOCTYPE html>
<html>
<head>
<title>My Component</title>
<script src="../../../../node_modules/es6-shim/es6-shim.min.js"></script>
<script src="../../../../node_modules/systemjs/dist/system-polyfills.js"></script>
<script src="../../../../node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="../../../../node_modules/systemjs/dist/system.src.js"></script>
<script src="config.js"></script>
<script src="../../../../node_modules/rxjs/bundles/Rx.min.js"></script>
<script src="../../../../node_modules/angular2/bundles/angular2.min.js"></script>
<script>
System.import("./app/main").catch(console.log.bind(console));
</script>
</head>
<body>
<my-comp></my-comp>
</body>
</html>
This is essentially similar to the HTML in Angular's 5 Min Quickstart, but I still get the error in IE. Any ideas?

Finally there is a workaround for the issue (2nd comment).
What worked for me was to include the script 'https://npmcdn.com/angular2/es6/dev/src/testing/shims_for_IE.js':
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
<script src="https://npmcdn.com/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
<script src="node_modules/systemjs/dist/system-polyfills.js"></script>
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>

How do browsers handle jquery library?

I have a code like this:
parent.html:
<head>
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>
<script src="jquery-ui-1.11.4/jquery-ui.min.js"></script>
<script>
$(function() {
$("#test").draggable().click(function() {
$("#objeto").attr('data', "child2.html").draggable();
});
});
</script>
</head>
<body>
<h2 id="test">text(draggable/click)</h2>
<object id="objeto" data="child1.html"></object>
</body>
and
child2.html:
<head>
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>
<script src="jquery-ui-1.11.4/jquery-ui.min.js"></script>
<script>
$(function() {
$("#text").draggable();
});
</script>
</head>
<body id="text">child2 (draggable)
</body>
This works correctly, parent loads with child1 content and if you click on "text" it switches to child2, but what i want to know is:
am I downloading jquery.min.js and jquery-ui.min.js 2 times? or are is the second time pulled from cache? (since i'm asking for the same file again)
is there a way I could use jquery without including it on the child's header? (since it is already on the parent)