作为 function 参数传递给 onclick 事件的变量显示为“未定义”

Question

我正在尝试创建“添加到监视列表”功能，但遇到了一些问题。 运行程序时，我的 function 的参数显示为“未定义”错误。

以下是我的 HTML 代码

<html>
    <head>
        <link rel="stylesheet" href="index.css">
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap" rel="stylesheet">
    </head>
    <body>
        <div class="container">
            <header>
                <div class="head">
                    <h1>Find your film</h1>
                    <a href="#">My Watchlist</a>
                </div>
                <div class="search-bar">
                    <i class="fa-solid fa-magnifying-glass icon"></i>
                    <input type="text" class="input-field" id="input-text">
                    <button type="submit" class="submit" id="submit-btn">Search</button>
                </div>
            </header>
            <main id="body-container"></main>
        </div>
        <script src="index.js"></script>
        <script src="https://kit.fontawesome.com/a7b56fbb1c.js" crossorigin="anonymous"></script>
    </body>
</html>

以下是我在 index.js 中的代码

const body = document.getElementById("body-container")
const watchlistBtn = document.getElementsByClassName("add-watchlist")

let watchlist = []


document.getElementById("submit-btn").addEventListener("click", function() {
    let searchValue = document.getElementById("input-text").value
    let arr = []
    fetch(`https://www.omdbapi.com/?i=tt3896198&apikey=f2f47683&type=movie&s=${searchValue}`)
    .then(res => res.json())
    .then(data => {
        for (let i = 0; i < data.Search.length; i++) {
            arr.push(data.Search[i].imdbID)
            }
        for (let item of arr) {
            fetch(`https://www.omdbapi.com/?apikey=f2f47683&i=${item}`)
                .then(res => res.json())
                .then(data => {
                    renderMovie(data)
            })
        }
    })
})

function renderMovie(data) {
    body.innerHTML += `
    <div class="list-container">
        <div class="movie-container">
            <img src="${data.Poster}" class="poster">
            <div class="movie-details">
                <div class="row-1">
                    <h2 id="movie-title">${data.Title}</h2>
                    <i class="fa-solid fa-star"></i>
                    <p id="movie-rating">${data.imdbRating}</p>
                </div>
                <div class="row-2">
                    <p id="run-time">${data.Runtime}</p>
                    <p id="genre">${data.Genre}</p>
                    <div id="button-container">
                        <button class="add-watchlist" onclick="addToWatchlist(${data.imdbID})"><i class="fa-solid fa-plus"></i> Watchlist</button>
                    </div>
                </div>
                <p class="description">${data.Plot}</p>
            </div>
        </div>
    </div>
    ` 
}


function addToWatchlist(dataID) {
    watchlist.push(dataID)
    console.log(dataID)
}

data.imdbID 返回一个以“tt”开头的字符串。 当我尝试这样的事情时

function renderMovie(data) {
    let numb = data.imdbID.slice(2)
    body.innerHTML += `
    <div class="list-container">
        <div class="movie-container">
            <img src="${data.Poster}" class="poster">
            <div class="movie-details">
                <div class="row-1">
                    <h2 id="movie-title">${data.Title}</h2>
                    <i class="fa-solid fa-star"></i>
                    <p id="movie-rating">${data.imdbRating}</p>
                </div>
                <div class="row-2">
                    <p id="run-time">${data.Runtime}</p>
                    <p id="genre">${data.Genre}</p>
                    <div id="button-container">
                        <button class="add-watchlist" onclick="addToWatchlist(${numb})"><i class="fa-solid fa-plus"></i> Watchlist</button>
                    </div>
                </div>
                <p class="description">${data.Plot}</p>
            </div>
        </div>
    </div>
    ` 
}

function addToWatchlist(dataID) {
    watchlist.push(dataID)
    console.log(dataID)
}

当我使用 slice 删除字符串的前两个字符然后尝试 onclick 功能时，我得到的 output 如下，这是没有意义的。

我错过了什么？ 任何建议都会有帮助。

Answer 1

当您使用字符串插值时，它会插入字符串。 您需要在${numb}周围添加额外的引号：

function renderMovie(data) {
    let numb = data.imdbID.slice(2)
    body.innerHTML += `
    <div class="list-container">
        <div class="movie-container">
            <img src="${data.Poster}" class="poster">
            <div class="movie-details">
                <div class="row-1">
                    <h2 id="movie-title">${data.Title}</h2>
                    <i class="fa-solid fa-star"></i>
                    <p id="movie-rating">${data.imdbRating}</p>
                </div>
                <div class="row-2">
                    <p id="run-time">${data.Runtime}</p>
                    <p id="genre">${data.Genre}</p>
                    <div id="button-container">
                        <button class="add-watchlist" onclick="addToWatchlist('${numb}')"><i class="fa-solid fa-plus"></i> Watchlist</button>
                    </div>
                </div>
                <p class="description">${data.Plot}</p>
            </div>
        </div>
    </div>
    ` 
}

作为 function 参数传递给 onclick 事件的变量显示为“未定义”

问题描述

1 个解决方案

解决方案1
1 已采纳 2022-08-18 10:06:23

作为 function 参数传递给 onclick 事件的变量显示为“未定义”

问题描述

1 个解决方案

解决方案1 1 已采纳 2022-08-18 10:06:23

解决方案1
1 已采纳 2022-08-18 10:06:23