place the result of each iteration of the cycle in html for

Question

If you could help me with a question, I would really appreciate it! So, I’m very junior in javascript and I’m doing an exercise, where I wanted to put the results of my cycle out to appear in HTML, but I’m not getting there.

Basically, I get two values as input and one of them is the cost of the first day of holidays to which I want to add 20% later every day.

const cost = document.querySelector(".input1");
const days = document.querySelector(".input2")
const btnConvert = document.querySelector(".btn-converter");

function calculoDespesaViagem(cost, days) {
  days = [];
  const percentage = 1.2;
  let maxDays= days.length -1

  for (let i = 1; i < maxDays; i++) {

    cost = cost * percentage;
  

    document.getElementByClassName("li").innerHTML = (` valor do dia ${i + 1}: ${cost}`);
  }

return cost;

}

btnConvert.addEventListener('click', function () {
  calculoDespesaViagem(cost.value, days.value);
});

  <section class="container">
      <h1>Exercícios</h1>

      <label class="label"
        >Valor do primeiro dia de viagem
        <input type="number" value="50" class="input1" />
      </label>
      <label class="label"
        > Total de dias de viagem
        <input type="number" value="4" class="input2" />
      </label>

      <button class="btn btn-converter" id="btn-converter">Calcular Custos</button>

     <ul class="list">
       <li class="li"></li>
     </ul>
      <!--<h2 class="total" id="h2"></h2>-->
    
    </section>

basically I intended to appear in html more or less like this:

day 1 value: 60

day 2 value: 72

day 3 value: 86.39

day 4 value: 103.68

...

Answer 1

Hello,

The problem is in two places:

1. You are creating a new variable days. It is an empty vector, returning length = 0;
2. The way to create the elements is wrong.

const cost = document.querySelector(".input1");
const days = document.querySelector(".input2")
const btnConvert = document.querySelector(".btn-converter");

//mudeio o nome da variável 'days'
function calculoDespesaViagem(cost, nDays) {
  //days = []; isso aqui tá fazendo com que a entrada no for não aconteça problema 1
  const percentage = 1.2;
  let maxDays= days.length -1

  for (let i = 1; i < nDays; i++) {

cost = cost * percentage;
//problema 2 está por aqui 
valor = ` valor do dia ${i+1}: ${cost.toFixed(2)}`
//criando um elemento HTML para o LI
li = document.createElement("li");
li.innerText = valor;
//Anexando no UL existente
ul = document.getElementsByTagName("ul")[0]
ul.appendChild(li);

  }

return cost;

}

btnConvert.addEventListener('click', function () {
  calculoDespesaViagem(cost.value, days.value);
});

  <section class="container">
      <h1>Exercícios</h1>

      <label class="label"
        >Valor do primeiro dia de viagem
        <input type="number" value="50" class="input1" />
      </label>
      <label class="label"
        > Total de dias de viagem
        <input type="number" value="4" class="input2" />
      </label>

      <button class="btn btn-converter" id="btn-converter">Calcular Custos</button>

     <ul class="list">
       <li class="li"></li>
     </ul>
      <!--<h2 class="total" id="h2"></h2>-->
    
    </section>