I am developing a chrome app (on chromebook) and the javascript wont load. Is it the code, the fact that it is an app? Can someone help? Here is my code:
<!DOCTYPE html>
<html>
<body>
<h1>Cash Register</h1>
//inputs
<input type="text" id="myText1" value="Name">
<input type="text" id="myText2" value="Price">
//add button
<button onclick="add()">Add</button>
//The total goes here
<div id="div1"><h2 id="demo1"><h2 id="demo2"></h2></div>
<script>
//my function
function add() {
//variables
var x = 'Total:'
var y = document.getElementById("myText2").value;
var z = document.getElementById("myText1").value;
//writes the items you enter
//makes a separating line
var para = document.createElement("h4");
var node = document.createTextNode('_____');
para.appendChild(node);
var element = document.getElementById("div1");
element.appendChild(para);
//makes the item
var para = document.createElement("h4");
var node = document.createTextNode(z);
para.appendChild(node);
var element = document.getElementById("div1");
element.appendChild(para);
//makes the price
var para = document.createElement("p");
var node = document.createTextNode(y);
para.appendChild(node);
var element = document.getElementById("div1");
element.appendChild(para);
//writes "Total (total price)"
var w = document.getElementsByTagName("p"); // this gets all the P's as an object
// setup a total starting at 0
var total = 0;
for (var i = 0; i < w.length; i++) {
total += parseInt(w[i].innerText); // make the inner text an integer for addition.
}
document.getElementById("demo1").innerHTML = x;
document.getElementById("demo2").innerHTML = total; // replace w with total
}
</script>
</body>
</html>
Anything would help. If you have a solution, please shoe it to me! Thank you. By the way, I am new at this. When I put it through jshint, this is what I got: (Image)
So, all I had to do was add
//my function
function add() {
//variables
var x = 'Total:';
var y = document.getElementById("myText2").value;
var z = document.getElementById("myText1").value;
//writes the items you enter
//makes a separating line
var para = document.createElement("h4");
var node = document.createTextNode('_____');
para.appendChild(node);
var element = document.getElementById("div1");
element.appendChild(para);
//makes the item
para = document.createElement("h4");
node = document.createTextNode(z);
para.appendChild(node);
element = document.getElementById("div1");
element.appendChild(para);
//makes the price
para = document.createElement("p");
node = document.createTextNode(y);
para.appendChild(node);
element = document.getElementById("div1");
element.appendChild(para);
//writes "Total (total price)"
var w = document.getElementsByTagName("p"); // this gets all the P's as an object
// setup a total starting at 0
var total = 0;
for (var i = 0; i < w.length; i++) {
total += parseInt(w[i].innerText); // make the inner text an integer for addition.
}
document.getElementById("demo1").innerHTML = x;
document.getElementById("demo2").innerHTML = total; // replace w with total
}
document.addEventListener('DOMContentLoaded', function() {
var link = document.getElementById('link');
// onClick's logic below:
link.addEventListener('click', function() {
add()
});
});
to a javascript file and change my script tag to
<script src="add.js"></script>
If anyone wants to use this, here is the code:
Manifest:
{
"name": "Cash register",
"description": "Use at garage sales",
"version": "0.1",
"manifest_version": 2,
"app": {
"background": {
"scripts": ["background.js"]
}
},
"icons": { "16": "calculator-16.png", "128": "calculator-128.png" }
}
background.js:
chrome.app.runtime.onLaunched.addListener(function() {
chrome.app.window.create('index.html', {
'outerBounds': {
'width': 400,
'height': 500
}
});
});
add.js:
//my function
function add() {
//variables
var x = 'Total:';
var y = document.getElementById("myText2").value;
var z = document.getElementById("myText1").value;
//writes the items you enter
//makes a separating line
var para = document.createElement("h4");
var node = document.createTextNode('_____');
para.appendChild(node);
var element = document.getElementById("div1");
element.appendChild(para);
//makes the item
para = document.createElement("h4");
node = document.createTextNode(z);
para.appendChild(node);
element = document.getElementById("div1");
element.appendChild(para);
//makes the price
para = document.createElement("p");
node = document.createTextNode(y);
para.appendChild(node);
element = document.getElementById("div1");
element.appendChild(para);
//writes "Total (total price)"
var w = document.getElementsByTagName("p"); // this gets all the P's as an object
// setup a total starting at 0
var total = 0;
for (var i = 0; i < w.length; i++) {
total += parseInt(w[i].innerText); // make the inner text an integer for addition.
}
document.getElementById("demo1").innerHTML = x;
document.getElementById("demo2").innerHTML = total; // replace w with total
}
document.addEventListener('DOMContentLoaded', function() {
var link = document.getElementById('link');
// onClick's logic below:
link.addEventListener('click', function() {
add()
index.html:
<html>
<head>
<script src="add.js"></script>
</head>
<body>
<h1>Cash Register</h1>
<input type="text" id="myText1" value="Name">
<input type="text" id="myText2" value="Price (numbers only)">
<a id="link">Add</a>
<div id="div1"><h2 id="demo1"></h2><h2 id="demo2"></h2></div>
</body></html>
Thanks Everyone!!!