Question

我得到了简单的代码，在这里运行link

<!DOCTYPE html>
<html>
<body>
<link href="popup.css" rel="stylesheet">
<p> price in usd: <input type=text id="price" name="price" onChange="calc()"></p>
<p>Brutto: <input type=number id="brutto" name="brutto"></p>
<script>
function calc() {
  document.getElementById("brutto").value = 1.2 * document.getElementById("price").value;
}
</script>
</body>
</html>

为什么代码不能在我的popup.html中运行？在扩展名中无法更改onChange事件？

popup.html

<!DOCTYPE html>
<html>
<body>
<link href="popup.css" rel="stylesheet">
<script type="text/javascript" src="../libs/jquery/jquery.min.js"></script>
<script type="text/javascript" src="popup.js"></script>
<link href="popup.css" rel="stylesheet">
<p> price in usd: <input type=text id="price" name="price" onChange="calc()"></p>
<p>Brutto: <input type=number id="brutto" name="brutto"></p>
</body>
</html>

popup.js

function calc() {
  document.getElementById("brutto").value = 1.2 * document.getElementById("price").value;
}

Answer 1

由于内容安全策略，不要从HTML调用函数。

在加载页面后使用jquery / javascript绑定事件“更改”。请参阅以下我使用jquery为您制作的示例。

<强> popup.js

$(function(){
$("#price").change(function(){
    calc();
    alert("The text has been changed.");
});
});

function calc() {
  document.getElementById("brutto").value = 1.2 * document.getElementById("price").value;
}

注意

确保Jquery必须在popup.html中

为什么代码无法在Chrome扩展程序中运行？

1 个答案: