Как рандомизировать объекты / ссылки на веб-странице? - PullRequest
0 голосов
/ 18 марта 2020

Я самообучаюсь HTML, CSS и JavaScript и пытаюсь что-то соединить.

Я хотел бы иметь 100 кликабельных изображений / ссылок (просто кнопки одного изображения на самом деле). Мне бы хотелось, чтобы процент кнопок указывал на одну страницу, а остальные - на другую страницу. Это будет слепым для пользователя, пока они не нажмут на него

Каждый раз, когда страница перезагружается, я хотел бы, чтобы изображения / ссылки были рандомизированы в зависимости от того, где они находятся.

Я знаю, что могу генерировать случайное число в JS с Math.random(), но не могу понять, как сделать то, что я описываю выше. Я знаю, что могу учиться лучше всего, поэтому я проверял, есть ли у кого-нибудь руководство.

1 Ответ

0 голосов
/ 18 марта 2020
document.addEventListener('DOMContentLoaded', function() {
    for(var i=0;i<100;i++)
        CreateButtons();
});

function CreateButtons()
{
    var btn = document.createElement("BUTTON");   // Create a <button> element
    btn.innerHTML = "Try your luck";                   // Insert text

    btn.onclick = RedirectLink;
    document.body.appendChild(btn);  
}

function RedirectLink()
{
    var redirectLink = "";
    var randomNumber = Math.random();
    if(randomNumber % 2 == 0)
        redirectLink = "https://www.w3schools.com/jsref/met_document_createelement.asp";
    else
        redirectLink = "https://www.w3schools.com/howto/howto_js_redirect_webpage.asp";
    window.location.replace(redirectLink);
}

CreateButtons() создаст список кнопок для вас, и каждый раз, когда страница загружается и нажимается кнопка RedirectLink() будет случайным образом определять, куда перенаправить пользователя.

Вот некоторые ссылки что я упомянул, чтобы придумать этот ответ: https://www.w3schools.com/jsref/met_document_createelement.asp https://www.w3schools.com/howto/howto_js_redirect_webpage.asp

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...