Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

338
Visualizações
can we use js variable name as class name in html

I want to concatinate class name with variable count which keep getting updated after each button click, for which I am getting error as "citysName is null". can anyone suggest

button.addEventListener('click', resp => {
    count = count +1;
    var card = document.createElement('card');
    card.innerHTML = `
                <img src="..." class="card-img-top" alt="...">
                <div class="card-body">
                  **<h5 class="card_title" + count></h5>
                  <h6 class="temp" + count></h6>
                  <p class="card-text" + count></p>**
                  <a href="#" class="btn-primary"></a>
                </div>
    `;
    card.className = 'card';
    var content = document.getElementById('id1');
    content.appendChild(card);
    **var citysName = document.querySelector('.card_title'+count);
    var description = document.querySelector('.card-text'+count);
    var temp = document.querySelector('.temp'+count);**
    fetch('https://api.openweathermap.org/data/2.5/weather?q='+inputVal.value+'&appid=a5599c020b0d897cbc8b52d547289acc')
    .then(post => post.json())
    .then(data => {
        var cityName = data['name'];
        var temper = data['main']['temp'];
        var descrip = data['weather'][0]['description'];

        let ctemp = Math.round(temper-273);
        citysName.innerHTML = cityName;
        temp.innerHTML = ctemp + "°C";
        description.innerHTML = descrip;
    })
})
about 4 years ago · Juan Pablo Isaza
1 Respostas
Responde à pergunta

0

First of all thats not how you add variables using template literals you can read more about it here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

Second why do you query it again when you've just made the element you can use card as reference and if you need something within it, its much easier to access it using the variable you already have other than looking for it in your document

Maybe something like this but its hard to tell withouth more code etc

button.addEventListener('click', resp => {
    count = count +1;
    var card = document.createElement('card');
    card.innerHTML = `
                <img src="..." class="card-img-top" alt="...">
                <div class="card-body">
                  **<h5 class="card_title${count}"></h5>
                  <h6 class="temp${count}"></h6>
                  <p class="card-text${count}"></p>**
                  <a href="#" class="btn-primary"></a>
                </div>
    `;
    card.className = 'card';
    var content = document.getElementById('id1');
    content.appendChild(card);
    var citysName = card.querySelector('.card_title'+count);
    var description = card.querySelector('.card-text'+count);
    var temp = card.querySelector('.temp'+count);
    fetch('https://api.openweathermap.org/data/2.5/weather?q='+inputVal.value+'&appid=a5599c020b0d897cbc8b52d547289acc')
    .then(post => post.json())
    .then(data => {
        var cityName = data['name'];
        var temper = data['main']['temp'];
        var descrip = data['weather'][0]['description'];

        let ctemp = Math.round(temper-273);
        citysName.innerHTML = cityName;
        temp.innerHTML = ctemp + "°C";
        description.innerHTML = descrip;
    })
})
about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda