Как сделать что бы кнопка нажималась один раз, а так же вывести доп поле с % [закрыт]

170

14 сентября 2019, 23:30

Помогите решить проблему, так как в js не шарю. Суть задачи такова. При нажатии на кнопку нужно что бы она стала не активной(нажать можно только 1 раз). Так же нужно вывести еще одно поле с рандомным значением (3% 4% 5%). Заранее благодарен за помощь.

Код html

<!DOCTYPE html>
<html>
<head>
    <title>123</title>
    <script src="random.js"></script>
<script>
</script>
</head>
<body style="text-align: center;">
<button onclick="generate()">Generate!</button>
    <div id="random" style="font-size: 25px; color: green; "></div>
</body>
</html>

function generate() {
    var pass = "";
    var strong = 5;
    var dic = "abcdefghijklmnopqrstuvwxyz1234567890";
    for (var i = 0; i < strong; i++) 
    {
        pass += dic.charAt(Math.floor(Math.random() * dic.length));
    }
    document.getElementById('random').innerHTML = pass;
}

Answer 1

Попробуйте передать this в функцию generate, а за то чтобы кнопка была недоступна отвечает атрибут disabled:

function generate(el) { 
  el.disabled = true; 
  var pass = ""; 
  var strong = 5; 
  var dic = "abcdefghijklmnopqrstuvwxyz1234567890"; 
 
  for (var i = 0; i < strong; i++) { 
    pass += dic.charAt(Math.floor(Math.random() * dic.length)); 
  } 
  document.getElementById('random').innerHTML = pass; 
  document.getElementById('random-percent').innerHTML = Math.floor(Math.random() * 3) + 3 + '%'; 
}

<button onclick="generate(this)">Generate!</button> 
<div id="random" style="font-size: 25px; color: green; "></div> 
<div id="random-percent" style="font-size: 25px; color: green; "></div>

Answer 2

document.querySelector("button").addEventListener("click", (e) => { 
  e.currentTarget.setAttribute("disabled", "disabled"); 
  document.querySelector("p").innerHTML = Math.floor(3 + Math.random() * (3)) + "%"; 
});

<button>Generate</button> 
<p></p>

Answer 3

addEventListener; Используйте once: true, чтобы выполнить обработчик один раз.

function generate() { 
  var pass = ""; 
  var strong = 5; 
  var dic = "abcdefghijklmnopqrstuvwxyz1234567890"; 
 
  for (var i = 0; i < strong; i++) { 
    pass += dic.charAt(Math.floor(Math.random() * dic.length)); 
  } 
 
  pass += "<br>"; 
  pass += Math.round(3 + Math.random() * 2) + "%"; 
 
  document.getElementById('random').innerHTML = pass; 
   
  document.getElementById("btn").setAttribute("disabled", "disabled"); 
} 
 
document.getElementById("btn").addEventListener("click", generate, { 
  once: true 
});

<!DOCTYPE html> 
<html> 
 
<head> 
  <title>123</title> 
  <script src="random.js"></script> 
  <script> 
  </script> 
</head> 
 
<body style="text-align: center;"> 
 
  <button id="btn">Generate!</button> 
  <div id="random" style="font-size: 25px; color: green; "></div> 
</body> 
 
</html>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

как поместить массив в конкретный div

Есть массив со значениями необходимо значения поместить в блок на странице( допустим div class='menu') Пытался сделать но как-то плохо вдупляю...

167

javascript

Как изменить тип html элемента?

Подскажите, пожалуйста, как изменить тип элемента c 'input' на 'textarea' с определенным классом, но чтобы другие 'textarea' или 'input' при этом не были бы изменены,...

169

javascript