Question

我对Chrome扩展程序非常陌生，但我正在尝试构建一个用户输入最大值以及他们想要使用它的百分比。然后它将返回该百分比。这个应用程序的目的是让举重运动员在观看他们的计划时可以轻松占用他们的电梯百分比。

不幸的是，一旦点击提交按钮，我就无法弄清楚如何将值写回网页。代码如下。任何帮助将不胜感激！

HTML：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JS Bin</title>
</head>
<body>
    <script src="popup.js"></script>
    <p>Please input maximum lift</p>
    <input type="number" id="max">Max</input><br><br>

    <input type="number" id="percent">%</input><br><br>

    <input type="submit" id="submit">

</body>
</html>

JS：

 var max = document.getElementById("max").value;

 var percent = document.getElementById("percent").value;

 function equate() {
  var math = Math.round(max *(percent/100));
  document.write = (math);
 }

 document.querySelector("submit").addEventListener('click', equate() {
  equate();
 });

我真的不确定如何使用querySelector或addEventListener。

清单：

{
"manifest_version": 2,

"name": "Weightlifting Percentages",
"description": "A Chrome Extension to Calculate Weightlifting Percentages",
"version": "1.0",

"permissions": [
"tabs"
],

"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
}
}

这就是我想要的样子：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<p id="text">Please input maximum lift</p>
<div id="input_1">

<input type="number" id="max"> Max</input><br><br>
  
</div
<div id="input_2">
  
<input type="number" id="percent"> %</input><br><br>
  
</div>

<input type="submit" id="submit" onclick="popup()">

<script>
function popup(e) {
  var max = document.getElementById("max").value;
  var percent = document.getElementById("percent").value;
  var math = (Math.round(max *(percent/100)));
  document.write(math);
}
</script>

</body>
</html>

Answer 1

document.querySelector（）接受一个CSS选择器，比如＃34;＃submit＆＃34;，而不只是＆＃34;提交＆＃34;。并尝试

addEventListener('click', equate);

提交按钮Chrome扩展无法正常工作

1 个答案: