Making dynamic search bar for fetched data from API url

I have an API URL written by json contain data for some characters and I converted into Html by this javascript

async function getsrch() {
    
    
    let url = "https://www.urlcontent.com/api/characters?name=charactername";
alert(url);
    try {
        let res = await fetch(url);
        return await res.json();
    } catch (error) {
        console.log(error);
    }
  }
  async function rendersrch() {
    let users = await get4srch();
    let html = '';
    users.forEach(user => {
      let htmlSegment = `


      <div class="col-3 mt-3">
        <div class="card mx-3" style="  border-color: #114C38;">
          <img src="${user.img}" class="card-img img-thumbnail" alt="..." >
        <div class="card-body">
          <h5 class="card-title">${user.name}</h5>
          <a href="CharDetails.html?id=${user.char_id}" class="btn btn-primary float-end">More</a>
        </div>
      </div>
      </div>

                            `;

        html += htmlSegment;
    });

    let container = document.querySelector('.search');
// i made div with class called (search)
    container.innerHTML = html;
}

renderchar();

and it works well

this url contains details for 62 characters , and I want to make a search bar that shows the name I wrote in the search bar I made a form in the html by this way

  <label for="domTextElement">Name: </label>
 <input type="text" id="domTextElement" >

 <button type="button" onclick="getsrch()" value="value">
     click me!!
 </button>

and I added this for the script

  let str = document.getElementById("domTextElement").value

then I changed the URL into

let url = "https://www.urlcontent.com/api/characters?name="+str;

But when I type in the search there are not any reponse Where is the problem?