Javascript method not working from external stylesheet - Electron
Question
I am trying to call a javascript function which is determined by an onclick tag linked with a button. However, the javascript method call seems it is not working. The javascript is external, thus I am not using any inlines scripts.
I am also tyring to store a value from the button from one electron window to another, to store it on localstorage without the use of PHP. The other html Page is "c_card_prepaid_bank.html"
The context here is allowing the user to select an amount to pay.
HTML Main Page:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self' 'unsafe-eval'; object-src 'self'" />
<link rel="stylesheet" href="./assets/css/indexStyle.css" />
<title>Title</title>
</head>
<body>
<form class="grid-container" action="c_card_prepaid_bank.html">
<button id="set10" class="amnt-btn def-text">€ 10</button>
<button id="set15" class="amnt-btn def-text">€ 15</button>
<button id="set20" class="amnt-btn def-text">€ 20</button>
<button id="set40" class="amnt-btn def-text">€ 40</button>
<button id="set50" class="amnt-btn def-text">€ 50</button>
</form>
<script type="text/javascript" src="./js/renderer.js"></script>
</body>
</html>
HTML c_card_prepaid_bank.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self' 'unsafe-eval'; object-src 'self'" />
<link rel="stylesheet" href="./assets/css/indexStyle.css" />
<title>Title</title>
</head>
<body>
<div class="bottomText row-cont center-cont">
<h2 id="preAmount"></h2>
</div>
<script type="text/javascript" src="./js/renderer.js"></script>
</body>
</html>
Then I am using a Javascript method to print out the related amount in h2 ("preAmount")
Javascript Utilities.js
//Get Amount in Euros
document.getElementById("set10").onclick = getA();
function getA() {
localStorage.setItem('pre', "10");
}
const a = localStorage.getItem('pre');
document.getElementById("preAmount").innerHTML = "Credit Amount: " + a;
By doing this, nothing comes up in H2
1 answers
solution1
0 2020-12-24 10:48:57
Do something like:
document.getElementById('set10').addEventListener("click", function() {
localStorage.setItem('pre', "10");
});
const a = localStorage.getItem('pre');
document.getElementById("preAmount").innerHTML = "Credit Amount: " + a;
Using event listens is typically better than using "onclick" because onclick can be overrided by other event listeners on the page.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.