<script src="./script.js"></script> (Uncaught SyntaxError: Unexpected end of input)

Question

**screenshot of the error

大家好，

我是一个完全的编码初学者，当我收到错误时一直在编码和网络研讨会：未捕获的语法错误：输入意外结束。我附上了错误的屏幕截图。我认为这是在我添加 inputChange 函数时发生的。网络研讨会的讲师没有任何错误，我的代码（到目前为止）与他在视频中的代码完全相同。

谁能帮我理解并解决这个问题？

这是我的代码：

//Variables, Arrays, and Objects, dotNotation, bracketNotation
//Dom manipulation


let items = [
    {
      name: 'Ironhack T',
      price: 10,
      image: 'https://miro.medium.com/max/5190/1*aVsUjp1zvlRb1799gDjbLA@2x.jpeg'
    },
    {
      name: 'Ironhack Hoodie',
      price: 15,
      image: 'https://m.media-amazon.com/images/I/B1i3u9-Q-KS._AC_CLa%7C2140%2C2000%7CB1wqstnnTfS.png%7C0%2C0%2C2140%2C2000%2B0.0%2C0.0%2C2140.0%2C2000.0_UL1500_.png'
    },
    {
      name: 'Ironhack Sticker',
      price: 2,
      image:'https://e7.pngegg.com/pngimages/887/803/png-clipart-ironhack-web-development-job-startup-company-design-blue-user-interface-design-thumbnail.png'
    },
    {
      name: 'Ironhack Mug',
      price: 8,
      image: 'https://d0bb7f9bf11b5ad1a6b2-6175f06f5e3f64e15abbf67415a276ec.ssl.cf1.rackcdn.com/product-images/designlab/11-oz-traditional-ceramic-coffee-mugs-7102-white1582888132.jpg'
    },
  ];

  let list = document.querySelector('ul');


items.forEach((item, i) =>{
    console.log(item.name);
    list.innerHTML += `<li>
    <div>Name: ${item.name}</div>
    <div>Price: $${item.price}</div>
    <img src="${item.image}" />
    <input type='number' placeholder='quantity' onchange='inputChange(${i}, '${item.name}', '${item.price}')' />
    <button>Buy item</button>
    </li>`
});

function inputChange(i, name, price){
console.log('I want to buy the ',i,' item named, ',name,' that costs $',price);
};

*{
    transition: all 1s;
}


body{
    padding: 10px;
    background-color: lightseagreen;

}

section{
    display: flex;
    flex-direction: row;
}


img {
    width: 50px;
}


#cart{
    background-color:salmon;
}

#cart, #items{
    width: 50vw;
}

h1{
    color:#7c32ff;
}
/*selecting a tag*/

p{
    color:green;
    text-decoration: line-through;
}


/*Ids have hashtags*/
#two {
    background-color:rebeccapurple;
}

/*classes have dots*/
.example {
    border: 5px dashed purple;
    margin: 5px;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!--Now my CSS is linked to my html-->
    <link href="/favicon.ico" type="image/x-icon" rel="icon" />
    <link rel="stylesheet" href="./style.css" />
</head>

<body>

    <section>

        <div>
            <h2>Items</h2>
            <ul id="items">


            </ul>

        </div>
        <div>
            <h2>Cart <span id="grandTotal">[=12=]</span></h2>
            <ul id="cart">


            </ul>
        </div>

    </section>

    <!-- <div class="example">
        This is a div
    </div>
        
    <div class="example" id="two">
        This is a div 2 
    </div>
        
    <div class="example">
        This is a div 3
    </div>
    <i>This will be italic text</i>
    <b>This will be bold text</b>    
    <h1>This is a certain size</h1>
    <p>This is for paragraphs</p> -->
    <script src="./script.js"></script>
</body>

</html>

Answer 1

您的代码 ./script.js 不正确。
这是 HTML 文件路径的一些示例：

<srcipt src="script.js">    The "script.js" file is located in the same folder as the current page
<srcipt src="js/script.js"> The "script.js" file is located in the js folder in the current folder
<srcipt src="/js/script.js">    The "script.js" file is located in the js folder at the root of the current web
<srcipt src="../script.js"> The "script.js" file is located in the folder one level up from the current folder

Answer 2

编辑：修复以下代码中的单引号 (') 和双引号 (") 就足够了

请注意 双引号 将传递给 inputChange 的变量括起来。并注意 单引号 包装传递给 onchange='...' 属性

的完整值

// Inside the forEach loop

  list.innerHTML += `<li>
  <div>Name: ${item.name}</div>
  <div>Price: $${item.price}</div>
  <img src="${item.image}" />
  <input type='number' placeholder='quantity' onchange='inputChange("${i}", "${item.name}", "${item.price}")' />
  <button>Buy item</button>
  </li>`;

编辑：另外记录当前输入值的替代解决方案

在调试时，我采用了另一种解决方案，该解决方案还记录了输入元素的当前值（即客户想要购买多少）。

只为每个项目添加一个输入元素，带有一个 id 属性，以便稍后在更改事件触发时获取它。
使用 .addEventListener("change", inputChange) 添加事件侦听器 - inputChange 将在每次更改输入元素时收到一个 event 对象。
inputChange 是事件处理函数。它提取输入元素的 id，并使用它来查找数据（items 数组中的对象）和 Array.prototype.find()（有关此原型的更多信息 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find）

// script.js

//Variables, Arrays, and Objects, dotNotation, bracketNotation
//Dom manipulation

let items = [
  {
    name: "Ironhack T",
    price: 10,
    image: "https://miro.medium.com/max/5190/1*aVsUjp1zvlRb1799gDjbLA@2x.jpeg",
  },
  {
    name: "Ironhack Hoodie",
    price: 15,
    image:
      "https://m.media-amazon.com/images/I/B1i3u9-Q-KS._AC_CLa%7C2140%2C2000%7CB1wqstnnTfS.png%7C0%2C0%2C2140%2C2000%2B0.0%2C0.0%2C2140.0%2C2000.0_UL1500_.png",
  },
  {
    name: "Ironhack Sticker",
    price: 2,
    image:
      "https://e7.pngegg.com/pngimages/887/803/png-clipart-ironhack-web-development-job-startup-company-design-blue-user-interface-design-thumbnail.png",
  },
  {
    name: "Ironhack Mug",
    price: 8,
    image:
      "https://d0bb7f9bf11b5ad1a6b2-6175f06f5e3f64e15abbf67415a276ec.ssl.cf1.rackcdn.com/product-images/designlab/11-oz-traditional-ceramic-coffee-mugs-7102-white1582888132.jpg",
  },
];

/* Adds id property to objects inside items array */
items = items.map((item) => ({
  ...item,
  id: item.name.replace(" ", "-").toLowerCase(),
}));

/* inputChange receives event object when the input changes */
function inputChange(event) {
  // for inspection - log the event object
  // console.log(event);
  const { id } = event.target; // the id I gave to the input
  const number = event.target.value; // the current value of the input

  // find the object with the corresponding data in the items array
  const data = items.find((item) => item.id === id);

  console.log(
    `I want to by ${number} of the item named, ${data.name} that costs $${data.price}`
  );
}

let list = document.querySelector("ul");

items.forEach((item, i) => {
  /* prettier-ignore */
  list.innerHTML += `<li>
    <div>Name: ${item.name}</div>
    <div>Price: $${item.price}</div>
    <img src="${item.image}" />
    <input type='number' placeholder='quantity' id=${item.id} />
    <button>Buy item</button>
    </li>`;
});

/* Get all inputs */
const inputs = document.querySelectorAll("input");
inputs.forEach((inputEl) => inputEl.addEventListener("change", inputChange));

另外，脚本标签src属性中关于文件路径的一句话：在这种情况下，任一解决方案都可以：

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

<script src="./script.js"></script> (Uncaught SyntaxError: Unexpected end of input)

<script src="./script.js"></script> (Uncaught SyntaxError: Unexpected end of input)

javascript

syntax-error

编辑：修复以下代码中的单引号 (') 和双引号 (") 就足够了

编辑：另外记录当前输入值的替代解决方案