Can't save an API as an object

Question

NETWORK TABWith the code I have I want the console log to pass 6983839 to the console but it stays empty the whole time and the page refreshes. The endpoint of the API is here. The function is executed by a button press which I'm 99% sure isnt the issue as it works when a change the function to do something else and I have jQuery in my folder for the project aswell and linked in the html file. The code is my JS file is below,

 function showCard() {
  var cardName = document.getElementById('un').value;
  var  cardNameProper = cardName.replace(/\s/g,'');
  $.getJSON("https://db.ygoprodeck.com/api/v7/cardinfo.php?name=Tornado%20Dragon", null, function(info){
    var result = info["data"][0]["id"]
    console.log(result)
  })

}

Also including the HTML code incase its relevant

    <!DOCTYPE html>
<html>
<head>
  
  <script type="text/javascript" src="jquery-3.5.1.js"></script>
  <script type="text/javascript" src="javascript.js"></script>

  <style>
  .title{
    color: white;
  }

  .cardSearch{
    text-color: white;
  }

  #searchBox{
    margin-right: 20px;
   }

   #chosenCard{
     width: 177px;
     height: 254px;
   }
  </style>

  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
<body>
  <div class="container">
    <div id="header-img" class="container-fluid">
      <div class="card card-body bg-dark">
        <div class="rows">
        <div class="col-ms-8">
          <img src="yugioh.png" class = "img-responsive mx-auto d-block"/>
        </div>
        <div class="col-ms-4 text-center">
          <h4 class="title">Combo Builder</h4>
          <div id="searchBox">
            <form id="cardSearch">
              <input type="text" size="12" id="un" />
              <input type="submit" onclick="showCard();" value="Submit Card"/>
            </form>
            <img id="chosenCard" scr="cardBack.jpg">
          </div>
        </div>
        </div>
      </div>
      </div>
    </div>
</body>
</html>

Hi, this function seems to work correctly. The console logs "6983839" so the error must be somewhere else. Usually you preferably put all your related code in the question :) — NoNickAvailable, Aug 03 '20 at 20:32
try to remove the brackets and semicolon in the onclick attribute — NoNickAvailable, Aug 03 '20 at 20:34
No luck with that unfortunatley, when i look at the inspect element inorder to look at the console log i see this "The character encoding of the HTML document was not declared. The document will render with garbled text in some browser configurations if the document contains characters from outside the US-ASCII range. The character encoding of the page must be declared in the document or in the transfer protocol." Then when i click submit it goes blank and reloads with the same error — , Aug 03 '20 at 20:37
You're submitting the form. The AJAX request is send from the browser, and after that the pending submission is executed. This will reload your page, as you haven't set anything to `action` attribute. Use a button type of button to run the JS only, without submitting the form. — Teemu, Aug 03 '20 at 20:37
tried that the page doesnt reload but still nothing in the console — , Aug 03 '20 at 20:39
As others have already said, [your code works fine](https://jsfiddle.net/czyfpoha/). — Teemu, Aug 03 '20 at 20:40
what would be different when running it on my own laptop and on fiddle? — , Aug 03 '20 at 20:42
Nothing, open the Network tab, click the button, then you"ll see what is happening. — Teemu, Aug 03 '20 at 20:45
im fairly new to all this, nothing changes on the network tab when i press the submit card button, theres one thing listed but its for bootstrap — , Aug 03 '20 at 20:49
Open the Network Settings, and click "Persist Logs", then try. You can do this same at the linked fiddle, open the tab, click "Run", and you'll see the XHR response occuring to the tab. Make also sure you're not filtering anything out from the logging (also in the Console tab). — Teemu, Aug 03 '20 at 20:54
Take a look at these two fiddles (open the Network tab). [#1 submits the form](https://jsfiddle.net/eu5y0mvL/), and [#2 doesn't submit](https://jsfiddle.net/eu5y0mvL/1/). The second snippet should work for you too. — Teemu, Aug 03 '20 at 21:03
im not sure how to read it, theres a fair amount of CSS warnings but i cant see how that would interfere, ive attached an image of the network with persistent logs on, to the original post — , Aug 03 '20 at 21:03
The tab has to be already opened when you click the submit button. — Teemu, Aug 03 '20 at 21:05
And no request to your own page either? If that's the case, the onclick never executes your code. Put a log at the beginning of the function, just log "Runs". In the meanwhile, you can read about [inline listeners](https://stackoverflow.com/questions/62462554/how-does-the-way-in-which-a-javascript-event-handler-is-assigned-affect-its-exec/63119431#63119431). — Teemu, Aug 03 '20 at 21:09
It's finally working, i copied in the code from the fiddle and even though i cant see any differences it is working now! Thanks to everyone! — , Aug 03 '20 at 21:13

Can't save an API as an object

0 Answers0