variable passed as function parameter to onclick event showing as "not defined"

Question

I'm trying to create a "add to watchlist" feature, but am running to some problem. When run the program, the parameter of my function shows as "not defined" error.

The following is my HTML code

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

The following is my code in 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 returns a string, starting with "tt". When i try something like this

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)
}

the output i get when i use slice to remove the first two characters of the string and then try the onclick functionality is the following, which makes no sense.

What am i missing? Any suggestions would really help.

Joona · Accepted Answer · 2022-08-18 10:06:23Z

When you use string interpolation it inserts the string. you need to add extra quotation marks around ${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>
    ` 
}

Collectives™ on Stack Overflow

variable passed as function parameter to onclick event showing as "not defined"

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related