I am having difficulty transmitting message to the user

Asked

Viewed 56 times

-1

I am trying to make a list of names for giveaway using js, html, css and boostrap not yet adjusted the stylings wanted to make logica work first.

I created some functions but I think it is in Function adcCamp that I need to change the code so that the names inserted in the form are displayed in the tag

inside the lists

I’m leaving the complete code here ...

function botaoAtivo() {
  alert("O Sorteio contem " + nomes.length + " participantes");
}

function sorteio() {
  var quandidade = nomes.length;
  var sorteioAleatorio = parseInt(Math.random() * quandidade);
  document.write("O nome sorteado foi o " + nomes[sorteioAleatorio])
}


function adcCamp() {
  event.preventDefault()
  var nomeLista = document.getElementById("camp");
  nomes.push(nomeLista.value);

  if (botaoAdc.onclick = true) {
    document.getElementById("camp").value = ""
  }

  var trfNome = document.getElementById("listName")

}

var nomes = [];

var inserirParticipantes = document.getElementById("calc");
inserirParticipantes.onclick = botaoAtivo;

var botaoAdivinhar = document.getElementById("adivinhar");
botaoAdivinhar.onclick = sorteio;

var botaoAdc = document.getElementById("btn")
botaoAdc.onclick = adcCamp;
<!DOCTYPE html>
<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=2.0">
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
  <style>
    .lista {
      background-color: blue;
      padding: 80px;
      margin-top: 50px;
    }
  </style>
  <title>Sorteio</title>
</head>

<body>
  <button type="button" class="btn btn-primary" id="calc" data-calc>Conectar Participantes</button>
  <button type="button" id="adivinhar" class="btn btn-warning" data-adivinhar>Sortear</button>

  <input type="text" id="camp" data-camp/>
  <button type="button" class="btn btn-primary" id="btn" data-btn>Adicionar</button>
  <main>
    <div>
      <ul class="list" data-list>
        <li calass="listName" data-listName>
          <p class="items"></p>
        </li>
      </ul>
    </div>
  </main>




</body>

</html>

javascript html5

1 answer

0


You need to have a array within the function adcCamp to be able to store the items added in the function, the way it did every time it added a participant the global array will be overwritten, such as tbm the if there is no need. See that with just a few adjustments in HTML and a for function achieves the expected result:

var nomes = [];
var inserirParticipantes = document.getElementById("calc");
inserirParticipantes.onclick = botaoAtivo;

var botaoAdivinhar = document.getElementById("adivinhar");
botaoAdivinhar.onclick = sorteio;

var botaoAdc = document.getElementById("btn")
botaoAdc.onclick = adcCamp;

function botaoAtivo() {
  alert("O Sorteio contem " + nomes.length + " participantes");
}

function sorteio() {
  var quantidade = nomes.length;
  var sorteioAleatorio = parseInt(Math.random() * quantidade);
  document.getElementById("result").innerHTML = "O nome sorteado foi o " + nomes[sorteioAleatorio];
}


function adcCamp() {
  var _nomes = [];
  var nomeLista = document.getElementById("camp");
  _nomes.push(nomeLista.value);
  
  nomes.push(..._nomes);  // Se tiver dúvidas aqui procure por spread operator
  
  nomeLista.value = "";

  var trfNome = document.getElementsByClassName("list")[0];
  
  for(let i=0; i<_nomes.length; i++) {
    trfNome.innerHTML += `
      <li calass="listName" data-listName>
        <p class="items">${_nomes[i]}</p>
      </li>
    `;  
  }

}
.lista {
  background-color: blue;
  padding: 80px;
  margin-top: 50px;
}
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">

<button type="button" class="btn btn-primary" id="calc" data-calc>Conectar Participantes</button>
<button type="button" id="adivinhar" class="btn btn-warning" data-adivinhar>Sortear</button>

<input type="text" id="camp" data-camp />
<button type="button" class="btn btn-primary" id="btn" data-btn>Adicionar</button>
<main>
  <div>
    <ul class="list" data-list></ul>
  </div>
  <div>
    <p id="result"></p>
  </div>
</main>

I believe you are learning, as a hint in this exercise, I could try to validate if the field is filled, otherwise the add button becomes blocked.

  • thank you very much was banging your head on this a few days ago ! ... It means that almost all my code was correct only some adjustments were missing in html and for inside the function adcCamp?

  • That, only the adjustments were missing and most importantly an array inside the adcCamp.

  • 1

    Beauty, thank you very much helped me a lot !

Browser other questions tagged javascript html5

You are not signed in. Login or sign up in order to post.