Javascript方法不适用于外部样式表 - Electron答案

【问题标题】：Javascript method not working from external stylesheet - ElectronJavascript方法不适用于外部样式表 - Electron
【发布时间】：2021-04-02 19:49:35
【问题描述】：

我正在尝试调用由与按钮链接的 onclick 标记确定的 javascript 函数。但是，javascript 方法调用似乎不起作用。 javascript 是外部的，因此我没有使用任何内联脚本。

我也很想将按钮中的值从一个电子窗口存储到另一个电子窗口，以便在不使用 PHP 的情况下将其存储在本地存储中。另一个html页面是“c_card_prepaid_bank.html”

这里的上下文是允许用户选择要支付的金额。

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>
        <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>

然后我使用Javascript方法打印出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;

通过这样做，H2 中什么也没有发生

【问题讨论】：

标签： javascript html methods electron electron-builder

【解决方案1】：

执行以下操作：

document.getElementById('set10').addEventListener("click", function() {
   localStorage.setItem('pre', "10");
});

const a = localStorage.getItem('pre');
document.getElementById("preAmount").innerHTML = "Credit Amount: " + a;

使用事件侦听器通常比使用“onclick”更好，因为 onclick 可以被页面上的其他事件侦听器覆盖。

【讨论】：

中没有出现任何内容。但是，当我刚刚输入时： localStorage.setitem('pre', "10");它有效。

中没有出现任何内容。但是，当我刚刚输入时： localStorage.setitem('pre', "10");它有效。