So I'm trying to display the calculation result using innerHTML in a chrome extension. My code works outside the extension.
But when i run my chrome extension it seems that the span is not changing. I looked if there is any permission needed but couldn't find any. I really Don't understand whats wrong.
Manifest.json
{
"manifest_version": 2,
"name": "Raed %",
"description": "This extension allows the user to calculate percentage",
"version": "1.0",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"permissions": [
"activeTab",
"storage"
]
}
function calc(){
var num1 = document.getElementById('position').value;
var num2 = document.getElementById('end').value;
var dis = document.getElementById('result');
var result = num1 / num2 * num3;
dis.innerHTML = result + ' % Completed';
}<!doctype html>
<html>
<head>
<title>% CALCULATER</title>
<style type="text/css">
body {
margin: 10px;
white-space: nowrap;
}
h1 {
font-size: 15px;
}
#container {
align-items: center;
justify-content: space-between;
}
</style>
<script src="calculate.js"></script>
</head>
<body>
<h1>Percentage Calculater</h1>
<div id="container">
<form>
<input type="text" id="position" placeholder="Position"><br>
<input type="text" id="end" placeholder="End"><br>
<input type="button" onClick="calc()" value="Calculate">
<p>Result:</p>
<span id = "result">% Completed</span>
</form>
</div>
</body>
</html>