Блог

Я играю с программой, которая выбирает значение из массива, но у меня возникают проблемы с получением нового вывода после первоначального нажатия кнопки. Это позволит мне получить новый вывод только при обновлении страницы. Как я могу получать новый вывод каждый раз, когда нажимаю кнопку?

     var myArray = ['January', 'February', 'March', 'April', 'May'];

    var rand = Math.floor(Math.random() * myArray.length);

    var concat = myArray[rand];

    function random() {
    document.getElementById("demo").innerHTML = (concat);
    }  

   <p id="demo"></p>
  <button onClick="random()">
    Working Random Array generator
  </button>  

Вам нужно определить rand и concat определить переменные внутри random() функции, чтобы получить новый вывод при нажатии кнопки.

 var myArray = ['January', 'February', 'March', 'April', 'May'];

function random() {
  var rand = Math.floor(Math.random() * myArray.length);
  var concat = myArray[rand];
  document.getElementById("demo").innerHTML = (concat);
}  

 <p id="demo"></p>
<button onClick="random()">Working Random Array generator</button>  

Этот пример будет генерировать разный результат каждый раз, не повторяя одно и то же дважды подряд. Это гарантирует, что при каждом нажатии вы будете получать новый и другой результат.

Вариант 1: глобальная переменная

Алгоритм сравнивает последний использованный результат и присваивает его переменной lastUsed . При повторном нажатии проверяется, отличается ли результат от lastUsed того, является ли он тем же, сама функция вызывается снова, пока не вернет другой результат

Пример:

 var myArray = ['January', 'February', 'March', 'April', 'May'];
var lastUsed;

function random() {
    var rand = Math.floor(Math.random() * myArray.length);

    if(myArray[rand] !==  lastUsed) {
        document.getElementById("demo").innerHTML = myArray[rand];
        lastUsed = myArray[rand];
    } else {
        random();
    }
}  

 <button onClick="random()">
    Working Random Array generator
</button>
<p id="demo"></p>  

Вариант 2: внутренний текст

Другой способ сделать это сравнение без использования глобальной переменной — проверить, какое текущее значение находится в id="demo" элементе.

Пример:

 var myArray = ['January', 'February', 'March', 'April', 'May'];

function random() {
    var rand = Math.floor(Math.random() * myArray.length);
    var x = document.getElementById("demo");
    var lastUsed = x.innerText;

    if (myArray[rand] !== lastUsed) {
        x.innerHTML = myArray[rand];
        lastUsed = myArray[rand];
    } else {
        random();
    }
}  

 <button onClick="random()">
    Working Random Array generator
</button>
<p id="demo"></p>  

Вариант 3: localStorage

При необходимости мы должны быть уверены, что получим результат, отличный от предыдущего, даже после перезагрузки всей страницы. Вы можете сохранить последнее значение, используемое в localStorage

Пример:

 <button onClick="random()">
    Working Random Array generator
</button>
<p id="demo"></p>

<script>
    var myArray = ['January', 'February', 'March', 'April', 'May'];

    function random() {

        var lastUsed;

        var retrievedData = localStorage.getItem("myRandomInfo");
        if (retrievedData) {
            var myValue = JSON.parse(retrievedData);
            var lastUsed = myValue.myRandomInfo;
        }

        var rand = Math.floor(Math.random() * myArray.length);

        if (myArray[rand] !== lastUsed) {
            document.getElementById('demo').innerHTML = myArray[rand];

            var lastUsed = ({ myRandomInfo: myArray[rand] });
            localStorage.setItem("myRandomInfo", JSON.stringify(lastUsed));
        } else {
            random();
        }

    }
</script>