javascript в html - переход по случайной ссылке из списка

[Vikal]

Здравствуйте, товарищи.

Вопрос следующий:
есть таблица на 6 ячеек. В каждой ячейке ссылка-картинка.

Задача:
сделать так, чтобы при клике на каждую ссылку-картинку открывалась случайная страница по ссылке из заранее подготовленного списка ссылок.
При этом, у каждой ссылки-картинки свой список ссылок.

Пробовал несколько способов, и наиболее рабочими оказались вот эти два:

1.

<table>
<tr>
<td>
<a id="link" href=""><img src="pic01.png" alt="123"></a> </td>
</tr>
</table>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<script>
var a = [];
a[0] = '0001.html';
a[1] = '0002.html';
a[2] = '0003.html';
function rand( min, max ) {
    if( max ) {
        return Math.floor(Math.random() * (max - min + 1)) + min;
    } else {
        return Math.floor(Math.random() * (min + 1));
    }
}

window.document.getElementById('link').onmouseover = function() { this.setAttribute('href', a[rand(0,2)]); };
</script>



2.

<script>
var links = ['0001.html','0002.html','0003.html','0004.html','0005.html'];
window.onload = function() {
window.location.href = links[Math.round(Math.random() * 4)];
}
</script>

НО!

По факту оба не подходят. Первый работает, если такая ссылка-картинка одна на страницу. Если их несколько, то скрипт дает сбой, и работает только по одному из списков, но на все ссылки-картинки сразу.

Второй работает круто, но переход по ссылке-картинке ведет сначала на пустую страницу чисто со скриптом, которая уже сама автоматом перекидывает на случайную ссылку из списка. Т.е. в цепочке появляется еще одна страница, функция которой только в выполнении скрипта. Излишние движения.

Что посоветуете, товарищи?

Спасибо заранее.

[Malleys]

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

Вы, например, можете определить атрибут data-links на каждой ссылке, в котором будет храниться массив ссылок, из которого каждый раз при заходе на страницу будет выбираться одна из них.

<section class="random-links">
	<a data-links="['https://google.com/', 'https://youtube.com/', 'https://facebook.com/']">
		<img src="https://picsum.photos/id/110/250/250">
	</a>
	<a data-links="['https://wikipedia.org/', 'https://yahoo.com/', 'https://amazon.com/']">
		<img src="https://picsum.photos/id/238/250/250">
	</a>
	<a data-links="['https://twitter.com/', 'https://live.com/', 'https://instagram.com/']">
		<img src="https://picsum.photos/id/239/250/250">
	</a>
	<a data-links="['https://reddit.com/', 'https://netflix.com/', 'https://blogspot.com/']">
		<img src="https://picsum.photos/id/240/250/250">
	</a>
	<a data-links="['https://twitch.tv/', 'https://linkedin.com/', 'https://pinterest.com/']">
		<img src="https://picsum.photos/id/241/250/250">
	</a>
	<a data-links="['https://github.com/', 'https://stackoverflow.com/', 'https://whatsapp.com/']">
		<img src="https://picsum.photos/id/242/250/250">
	</a>
</section>

<script>

for(const link of document.querySelectorAll("section.random-links a")) {
	const urls = eval(link.dataset.links || "[]");
	if(urls.length === 0) continue;
	link.href = urls[urls.length * Math.random() | 0];
	link.target = "_blank";
}
	
</script>

[Vikal]

Мужик, спасибо большое что ответил.
Я не думал, что тут вообще кто-то отвечает, уже забил на эту тему.

Пока шло это время я нашел другие решения, но вопросов меньше не стало. Обрисую новые данные, может что посоветуешь, т.к. я в js и прочем разбираюсь плохо, все приходится осваивать почти с 0.

Вообще передо мной стоит задача такая:
Есть несколько таблиц. Текст в эти таблицы добавляется из единого css-файла, из таблицы стилей через div и content. Это все работает.

Вопрос в том, чтобы при клике на эту кнопку-картинку открывалась случайная таблица. Сначала я думал сделать для каждой таблицы отдельную страницу, почему и спрашивал про рандомайзер для ссылок.

Однако! Таких таблиц на данный момент уже 100, и планируется вводить новые, оттого с 100 страницами копаться это просто ад. Я нашел такое решение - рандомайзер для таблиц на 1 странице. Если надо припишу код, но суть в том, что в 1 HTML документ забивается сразу несколько таблиц (у меня по 20 штук) и при обновлении этой страницы выдается только 1 из них.

Это работает. Но только на компе. С телефона пробую - почему-то бесится размер шрифта, это просто ад. Часть таблиц с одним размером, часть с другим, я перерыл весь код, но ВСЕ таблицы одинаковые в плане форматирования, но размер РАЗНЫЙ, и это только на телефоне, на компе все ровно.

Вот теперь ищу альтернативу этому мракобесию.

Пока вижу вариант с твоим кодом (спасибо еще раз), сделать так - 1 страница, на ней 20 таблиц, у каждой таблицы anchor и ссылки ведут к анчерам, т.е. при клике на картинку-ссылку перекидывает на страницу со всеми таблицами и просто отматывает на нужный анчер. Но это криво... Остальные таблицы, по идее, должны быть скрыты.

В идеале мне нужен код, чтобы при обновлении страницы он выдавал 1 из ххх таблиц, записанных в этом же html-документе.

Пример таблицы:

<table>
<tr><td colspan="2">
<div class="con1-01"><!--ТЕКСТ--></div><br>
<div class="con2-01"><!--ТЕКСТ--></div><br>
<div class="con3-01"><!--ТЕКСТ--></div><br>
</td></tr>
<tr>
<td class="button1"><div class="imgbutton2">
<a href="1.html">
<img src="img/01.png" alt="123"></a></div></td>
<td class="button1"><a href="index.html">
<div class="button3">next</div></a></td></tr>
</table>

Вот таких таблиц, только с разными <div class="con-ХХХ"> 20 штук на 1 странице. Как сделать так, чтобы при обновлении страницы отображалась только 1 случайная из них?

Спасибо.

[рони]

Vikal,
Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:

[html run]
... минимальный код страницы с вашей проблемой
[/html]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

[рони]

Vikal,
таблицам присвоить класс, в css на этот класс пропиcать скрытие, сделать выборку всех элементов с этим классом, выбрать один элемент по индексу (смотри выше строка 27), убрать класс с выбранного элемента.

[Vikal]

Спасибо, я примерно так и представлял себе решение задачи. Но проблема в том, что я понимаю, о чем ты говоришь, но совершенно не знаю нюансов, чтобы воплотить это в коде.

Присвоить класс таблицам, я полагаю, можно по аналогии с классом для ячеек:

<table class="123"></table>

И видимо, скрыть так:

.123
{
display: none;
}

А далее я понятия не имею, что именно делать.
В чем и прошу помочь.
Спасибо.

[рони]

Vikal,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .hide{
      display: none;
  }
 </style>
 <script>
addEventListener("DOMContentLoaded", function() {
    const tables = document.querySelectorAll("table.hide"),
          table = tables[tables.length * Math.random() | 0];
          table.classList.remove("hide");
})

 </script>

</head>

<body>
<table class="hide">
    <tr>
        <td>1</td>
    </tr>
</table>
<table class="hide">
    <tr>
        <td>2</td>
    </tr>
</table>
<table class="hide">
    <tr>
        <td>3</td>
    </tr>
</table>
<table class="hide">
    <tr>
        <td>4</td>
    </tr>
</table>
<table class="hide">
    <tr>
        <td>5</td>
    </tr>
</table>

</body>
</html>

[Vikal]

Спасибо, попробую.

[Vikal]

Спасибо все работает. Но не работает как надо на телефоне. Может кто-то сталкивался и подскажет, потому как я уже с ума схожу. Вот документ с таблицами:

<!--v1-52-01--><table><tr><td colspan="2"><div class="con2-t-52-01"><!--ТЕКСТ--></div><br><div class="con4-t-52-01"><!--ТЕКСТ--></div><br><div class="con1-v-52"><!--ТЕКСТ--></div><br></td></tr></table>

<!--v2-52-01--><table><tr><td colspan="2"><div class="con1-t-52-01"><!--ТЕКСТ--></div><br><div class="con2-t-52-01"><!--ТЕКСТ--></div><br><div class="con4-v-52"><!--ТЕКСТ--></div><br></td></tr></table>

<!--v1-52-02--><table><tr><td colspan="2"><div class="con2-t-52-02"><!--ТЕКСТ--></div><br><div class="con4-t-52-02"><!--ТЕКСТ--></div><br><div class="con1-v-52"><!--ТЕКСТ--></div><br></td></tr></table>

<!--v2-52-02--><table><tr><td colspan="2"><div class="con1-t-52-02"><!--ТЕКСТ--></div><br><div class="con2-t-52-02"><!--ТЕКСТ--></div><br><div class="con4-v-52"><!--ТЕКСТ--></div><br></td></tr></table>

Как вы поняли, есть css файл, в котором находится ТЕКСТ, и который загружается в html в дивы <div class="con2-t-52-02"> и т.д. МАГИЯ в том, что если стоит 52 или 42 - шрифт скачет, он мелкий и не реагирует на css стили (или реагирует рандомно), но если в диве вместо 52 (один текст) поставить 11 (это другой текст) - ВСЕ РАБОТАЕТ, как надо. Какого дьявола? Разница между документами в 2х цифрах в диве css, но один работает, а другой нет!

То же самое, уважаемый Рони, и с вашим кодом. Сам по себе он работает отлично, но только не на телефоне. Все, что с 52 отображается мелко, ставишь 11 - то крупно, то мелко.
Телефон на андройде, браузер - яндекс.

Есть идеи почему так может быть?

[Vikal]

Решил (НО ЭТО НЕ ТОЧНО) данный вопрос следующим образом.
Изначально все мои страницы управлялись через 1 файл таблицы стилей.

Теперь я добавил в каждую страницу код:

[head]
<style type="text/css">
  table   {      font-size: 40px;  } 
  </style>
[/head]

И шрифт (ВРОДЕ КАК) выровнялся... Но я уже ничему не верю.