0

Here I'm trying to parse the JSON data through the search button. After searching an example "iPhone" it shows 15 results and 15 buttons through the loop. Now on the buttons I have made onclick attribute. But it's giving the mentioned error. I did this the same way before on another project. It worked. But now It's not working! My HTML code is here-

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <link rel="stylesheet" href="css/style.css">
    <link rel="shortcut icon" href="images/gadget.png" type="image/x-icon">
    <script src="https://kit.fontawesome.com/d7e626f44b.js" crossorigin="anonymous"></script>
    <title>Goriber Gadget</title>
</head>
<body>
    <!-- header -->
    <section class="d-flex justify-content-center align-items-center">
        <h1>Goriber Gadget</h1>
        <i class="fa-solid fa-phone d-block fs-3"></i>
    </section>
    <!-- header end -->
    <!-- input -->
    <section class="container mx-auto d-flex justify-content-center">
        <input id="input" type="text" placeholder="Search your phone" class="w-75">
        <button id="search" class="btn btn-primary">Submit</button>
    </section>
    <!-- input end -->
    <!-- detail section -->
    <section id="detail-section">

    </section>
    <!-- card -->    
    <div id="card-section" class="row row-cols-1 row-cols-md-3 g-4 container mx-auto">
      </div>
      <!-- card end -->

      
    <script src="js/app.js"></script>
</body>
</html>

My JS code is here:

const inputField= document.getElementById('input');
const searchButton= document.getElementById('search');
const cardSection= document.getElementById('card-section');
searchButton.addEventListener('click',function(event){
    const inputValue= inputField.value;
    fetch(`https://openapi.programming-hero.com/api/phones?search=${inputValue}`)
    .then(Response=>Response.json())
    .then(data=>display(data))
})
const display= data=>{
    if(data.data.length>0){
        for(const myData of data.data){
            const div= document.createElement('div');
            div.innerHTML=`<button onclick='moreDetail(${myData.slug})'>Submit</button>`
            div.classList.add('col');
            cardSection.appendChild(div);
        }
    } else{
        cardSection.innerHTML= `
        <div class="not-found"><i class="fa-solid d-inline-block fa-exclamation"></i><i class="fa-solid d-inline-block fa-heart-crack"></i>
        <p>No Result Found</p></div>
        `
    }
}
const detailSection= document.getElementById('detail-section');
function moreDetail(id){
    console.log(id);
    // fetch(`https://openapi.programming-hero.com/api/phone/${id}`)
    // .then(Response=>Response.json())
    // .then(data=>displayMore(data))
}
Tanim Istiak
  • 13
  • 7
  • 1
    You need quotes around `${myData.slug}` – Barmar Feb 28 '22 at 22:17
  • @Barmar yes it worked like a charm! but why did this happen! I didn't ever use quotes around it! – Tanim Istiak Feb 28 '22 at 22:22
  • The value is a string, so you have to put it in quotes when you're constructing a literal function call. – Barmar Feb 28 '22 at 22:22
  • You do it without quotes if you're doing an ordinary function call like `moreDetail(myData.slug)`. But since you're substituting into JavaScript source code, you need to put quotes around it to make it a literal. – Barmar Feb 28 '22 at 22:24
  • @Barmar oh yes! I'm a beginner. The works I previously did was with ID value. They were numerical though they were string. So that they worked without any quotes around it. Right? – Tanim Istiak Feb 28 '22 at 22:27
  • Right, it's not an issue for numbers. – Barmar Feb 28 '22 at 22:28
  • Inline event handlers like `onclick` are [bad practice](/q/11737873/4642212). They’re an [obsolete, cumbersome, and unintuitive](/a/43459991/4642212) way to listen for events. Always [use `addEventListener`](//developer.mozilla.org/docs/Learn/JavaScript/Building_blocks/Events#inline_event_handlers_%E2%80%94_dont_use_these) instead. – Sebastian Simon Mar 01 '22 at 03:49

0 Answers0