我的 javascript 无法在我的 chrome 应用程序上运行

Question

我正在开发一个 chrome 应用程序（在 chrome 书中），javascript 无法加载。是代码，它是一个应用程序的事实吗？有人可以帮忙吗？这是我的代码：

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

任何事情都会有所帮助。如果您有解决方案，请把它交给我！谢谢你。顺便说一下，我是新来的。当我把它通过 jshint 时，这就是我得到的：（图片）

Answer 1

好的，您创建了 3 次具有相同名称的相同元素，但我看不出您是如何使用额外的标签和元素的，但这很可能是引发错误的原因。

尝试将您的代码放入 http://jshint.com 中，您会发现问题。

Answer 2

所以，我所要做的就是添加

//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()


    });
});

到 javascript 文件并将我的脚本标记更改为

<script src="add.js"></script>

如果有人想使用这个，这里是代码：

清单：

{
  "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>

谢谢大家！！！

我的 javascript 无法在我的 chrome 应用程序上运行

My javascript wont work on my chrome app

google-chrome-app