My javascript wont work on my chrome app

Question

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)

It appears you are missing a closing h2 tag under //The total goes here — Marvel Moe, May 09 '18 at 20:31
thanks, I added the closing h2 tag, but the js still wont work... — Ethan P, May 09 '18 at 20:40
You have inline js code in attributes and script tags, which is not allowed by default in html pages of extensions or apps. Use a separate js file and addEventListener. — wOxxOm, May 10 '18 at 04:46
Possible duplicate of [onClick within Chrome Extension not working](https://stackoverflow.com/questions/13591983/onclick-within-chrome-extension-not-working) — wOxxOm, May 10 '18 at 04:48
I am new to coding, so, how should I do that? (I will try looking it up tn the meantime) — Ethan P, May 10 '18 at 16:32

score 0 · Accepted Answer · answered May 10 '18 at 19:28

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!!!

score -1 · Answer 2 · answered May 09 '18 at 21:56

-1

Ok, you are creating the same elements with the same name three times and I don't see how you are using the additional tags and elements but that is most likely the reason an error is being thrown.

Try putting your code through http://jshint.com and you'll see your issues.

answered May 09 '18 at 21:56

Marvel Moe

545
1
4
11

it was working on the w3schools tryit editor though.. I also put it through jshint, and it messed it up. Anything else? – Ethan P May 09 '18 at 22:11
What do you mean it messed it up. Can you show us exactly what the error says in the console? – Marvel Moe May 09 '18 at 23:33
yes, I changed my question. It now has the link to the image of the console – Ethan P May 10 '18 at 16:31

My javascript wont work on my chrome app

2 Answers2