is there a way to concatenate the value of an id with a url?-CodePudding

I'm having a problem with figuring out how to add the name of the pokemon given in the input field, into the url of the api. My goal is to be able to search for the desired pokemon and then view it in a div below. I'm not exactly sure what this specific technique or method would be called in order to achieve this. Thank you in advance.

<!DOCTYPE html>
<!-- Create a full CRUD application of your choice. If you can use an existing API, use AJAX to interact with it. However, you do not have to use an API. If you do not use an API, store the entities you will create, read, update, and delete in an array.
Use a form to add new entities
Build a way for users to update or delete entities
Use Bootstrap and CSS to style your project -->
<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">
    <title>Choose Your Pokemon Party</title>
</head>
<body>
    <div>
        <head>
            <h2>Choose Your Pokemon Party</h2>
        </head>
    </div>
    <div>
        <div id="new-pokemon">
            <h2>New Pokemon</h2>
            <input type="text" id="new-pokemon-name"  placeholder="Pokemon name">
            <button type="submit" id="create-new-pokemon">Submit</button>
        </div>
        <div id="view-pokemon">
            <!-- //views the requested pokemon, and you can add the pokemon from here -->
            <button type="submit" id="add-pokemon">Add</button>
        </div>
        <div id="pokemon-party">
            <!-- //pokemon party -->
        </div>
    </div>

    <script src="node_modules/jquery/dist/jquery.js"></script>
    <script src="script.js"></script> 
</body>
</html>

Javascript file

let pokeapi_URL = 'https://pokeapi.co/api/v2/pokemon/';

$.get('https://pokeapi.co/api/v2/pokemon/ditto', (data) => {
    return console.log(data);
});
$.get('#create-new-pokemon').click(function(){
    let pokemonName = $.get('new-pokemon-name').val();
    console.log($.get('https://pokemonapi.co/api/v2/pokemon/   pokemonName'))
});
class PokemonParty{
    constructor(pokemon)
    {

    pokemon = [];

    }

}
//When the user submits the name of the pokemon they want, it shows the pokemon, it's name
//typing moves and abilities
//the user can add the pokemon to it's party or search for another pokemon
//takes in the pokemon that are added from the form.

CodePudding user response：

Your current code seems to be confused regarding the function of the $.get() method. This is only for making AJAX requests. It's not for retrieving data from the DOM, or working with jQuery objects in general.

In the case of the Pokemon API, to retrieve data you simply need to concatenate the name of the pokemon to the end of the GET URL.

To do this, hook your event handler to the click of the button and retrieve the val() from the #new-pokemon-name element.

let pokeapi_URL = 'https://pokeapi.co/api/v2/pokemon/';

$('#create-new-pokemon').on('click', () => {
  let pokemonName = $('#new-pokemon-name').val();
  $.get(pokeapi_URL   pokemonName, data => {
    console.log(JSON.stringify(data));
    // build the UI based on the response data here...
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div>
  <head>
    <h2>Choose Your Pokemon Party</h2>
  </head>
</div>
<div>
  <div id="new-pokemon">
    <h2>New Pokemon</h2>
    <input type="text" id="new-pokemon-name"  placeholder="Pokemon name" value="squirtle" />
    <button type="button" id="create-new-pokemon">Submit</button>
  </div>
  <div id="view-pokemon">
    <!-- //views the requested pokemon, and you can add the pokemon from here -->
    <!-- <button type="submit" id="add-pokemon">Add</button> -->
  </div>
  <div id="pokemon-party">
    <!-- //pokemon party -->
  </div>
</div>

Note that if you're new to jQuery, I'd suggest reading the excellent beginner's documentation.