Chrome扩展程序browser_action表单

Question

<html>
    <input id="form_input_1">
    <input id="form_input_2">
    <button id="form_button">Calculate</button>
    <div id="div_1"></div>
</html>

I made a chrome extension as a "browser_action". 我做了一个chrome扩展名为“ browser_action”。

What I want to do it this in the popup: 我想在弹出窗口中执行以下操作：

<script>
    var num1 = document.getElementById('form_input_1').value;
    var num2 = document.getElementById('form_input_2').value;

    var answer = num1 + num2;

    document.getElementById('div_1').innerHTML = answer;
</script>

But everything i try i keep getting errors: 但是我尝试的一切我都会出错：

Refuses to run inline event handlers 拒绝运行内联事件处理程序
Refuses to execute... 拒绝执行...
Cannot read property 无法读取属性

I have done web development for 6 years and I know this is a dumb question, but does anyone have references or know where I can see something similar. 我已经进行了6年的Web开发，我知道这是一个愚蠢的问题，但是没有人参考或知道在哪里可以看到类似的内容。

I tried checking stackoverflow and google, but all I could find was information about changing the page or tab your on. 我尝试检查stackoverflow和google，但我能找到的只是有关更改页面或在页面上打标签的信息。 I just want to change the popup. 我只想更改弹出窗口。

I've spent 5 hours on this and I could use some good leads. 我在此上花了5个小时，可以使用一些好的线索。

Oddly enough, i've never used java and i made an app in 2 hours that accomplished this same thing, so i'm sure i'm missing something very simple. 奇怪的是，我从未使用过Java，而且我在2个小时内就完成了同一件事，制作了一个应用程序，因此，我确定我缺少非常简单的东西。

Sorry for my english, pleased edit grammar if you see anything. 对不起，我的英语，如果您看到任何内容，请高兴地编辑语法。

Answer 1

wOxxOm answered this question. wOxxOm回答了这个问题。

I was using DOMContentLoaded, but for some reason, it still wasn't working. 我正在使用DOMContentLoaded，但是由于某种原因，它仍然无法正常工作。

After taking his suggestion to move the js file to the bottom of the popup.html everything works. 在采纳他的建议之后，将js文件移至popup.html的底部，一切正常。

<html>
<body>
    <input id="form_input_1">
    <input id="form_input_2">
    <button id="form_button">Calculate</button>
    <div id="div_1"></div>
</body>
<script src="popup.js"></script>
</html>

Note: I tried my old code on windows and it worked while this solution works for windows and linux. 注意：我在Windows上尝试了我的旧代码，并且当此解决方案适用于Windows和Linux时，它仍然有效。 Also, when i packed the extension the old code works on linux. 另外，当我打包扩展名时，旧代码可在linux上运行。 I don't know why this is. 我不知道为什么会这样。

Thanks everyone for the help even though it was a dumb question! 谢谢大家的帮助，即使这是一个愚蠢的问题！

Chrome扩展程序browser_action表单

问题描述

1 个解决方案

解决方案1
1 2017-10-03 05:10:25

Chrome扩展程序browser_action表单

问题描述

1 个解决方案

解决方案1 1 2017-10-03 05:10:25

解决方案1
1 2017-10-03 05:10:25