文章/答案/技术大牛

发布

社区首页 >问答首页 ><script src="./script.js"></script> (Uncaught :意外的输入结束)

问<script src="./script.js"></script> (Uncaught :意外的输入结束)
EN

Stack Overflow用户

提问于 2021-08-05 15:08:00

回答 2查看 74关注 0票数 0

错误截图

大家好,

我是一个编码的完全初学者，并一直与一个网络研讨会，当我收到错误：未登录的SyntaxError:输入的意外结束。我包括了错误的截图。当我添加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">$0</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>

javascript

syntax-error

回答 2

Stack Overflow用户

回答已采纳

发布于 2021-08-05 17:22:48

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

注意，双引号将传递给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属性，用于稍后发生change事件时获取该元素。
每次更改输入元素时，使用.addEventListener("change", inputChange) - inputChange添加事件侦听器将收到一个event对象。
inputChange是事件处理程序函数。它提取输入元素的id，并使用它查找数据( items数组中的对象)和Array.prototype.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>

票数 0

Stack Overflow用户

发布于 2021-08-05 15:18:24

您的代码./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

票数 -1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/68669168

复制

相似问题

问<script src="./script.js"></script> (Uncaught :意外的输入结束)
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问<script src="./script.js"></script> (Uncaught :意外的输入结束)EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问<script src="./script.js"></script> (Uncaught :意外的输入结束)
EN