Javascript-форум - Как создать цитатник?

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Как создать цитатник? (https://javascript.ru/forum/misc/67096-kak-sozdat-citatnik.html)

Как создать цитатник?

Привет всем.
Пытаюсь сделать цитатник. Написал код который разумеется не работает.
Надо создать несколько массивов и запихнуть разные цитаты. При нажатие на кнопку выводилась цитата из случайного массива и в зависимости от того из какого массива выведена цитата выводилась фотография.
А вот код:
<html>
<head>
<script type="text/javascript">
var quotes = {
maxpayne: {
image: "1.jpg",
quote: ["Собирать улики стало поздно ещё пару сотен патронов назад. Я так давно миновал точку невозвращения, что забыл, как она выглядит.", "Я бы засмеялся, если бы помнил, как это делается.", "Если единственный выбор является неправильным, то это скорее не выбор, а судьба.", "Закон ямы. Неважно сколько карабкался наверх-обратно слетишь в один миг.", "В жизни есть вещи, которые ты не выбираешь — это то, как ты себя чувствуешь.", "Боязнь смерти заставляет нас контролировать эмоции — но без страсти Вы уже мертвы.", "Чем быстрее бежишь, тем больше кажется, что тебя в самом деле преследуют.", "Твои права зачитают тебе на похоронах.", "Намек был таким же туманным и неопределенным, как пуля в сердце.", "Дуло ее пистолета смотрело мне в лицо. Я ответил любезностью на любезность.",
"Положение быстро менялось от плохого к худшему.", "Рано или поздно обнаруживаешь, что леди удача — обыкновенная проститутка, а у тебя закончились наличные.", "Когда люди выходят из себя, они начинают совершать ошибки. Это я знал по собственному опыту.", "Как только я вошел, он завял, как двойка перед флеш-роялем.", "Иногда надо упасть, чтобы потом встать.", "Нет ничего, кроме пути вперед.", "Меняются твои взгляды, меняешься и ты.", "Спастись — это не для меня. Хэппи-энда не будет.", "Я чувствовал себя мёртвым. Я был мертв внутри."]
},
test: {
image: "2.jpg",
quote: ["Собирать улики стало поздно ещё пару сотен патронов назад. Я так давно миновал точку невозвращения, что забыл, как она выглядит.", "Я бы засмеялся, если бы помнил, как это делается.", "Если единственный выбор является неправильным, то это скорее не выбор, а судьба.", "Закон ямы. Неважно сколько карабкался наверх-обратно слетишь в один миг.", "В жизни есть вещи, которые ты не выбираешь — это то, как ты себя чувствуешь.", "Боязнь смерти заставляет нас контролировать эмоции — но без страсти Вы уже мертвы.", "Чем быстрее бежишь, тем больше кажется, что тебя в самом деле преследуют.", "Твои права зачитают тебе на похоронах.", "Намек был таким же туманным и неопределенным, как пуля в сердце.", "Дуло ее пистолета смотрело мне в лицо. Я ответил любезностью на любезность.",
"Положение быстро менялось от плохого к худшему.", "Рано или поздно обнаруживаешь, что леди удача — обыкновенная проститутка, а у тебя закончились наличные.", "Когда люди выходят из себя, они начинают совершать ошибки. Это я знал по собственному опыту.", "Как только я вошел, он завял, как двойка перед флеш-роялем.", "Иногда надо упасть, чтобы потом встать.", "Нет ничего, кроме пути вперед.", "Меняются твои взгляды, меняешься и ты.", "Спастись — это не для меня. Хэппи-энда не будет.", "Я чувствовал себя мёртвым. Я был мертв внутри."]
},
};
function rand(1, 19) {
return Math.round((1+Math.random()*(19-1)));}
</script>
</head>

<body>
<form>

<div>
<p id="quotes"></p>
<button onclick='quote'>Следующая цитата</button>
</div>
</form>

</body>
</html>

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

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

[js]
... ваш код...
[/js]

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

WGN,

[HTML] тут ваш код [/HTML]

так будет проще всем, появятся строки и возможность копировать

Что за бред, ты троль?

WGN,
если хотите получить помощь, воспользуйтесь просьбами выше.

WGN,

<html>
 <head>
   <meta charset="utf-8">
   <style type="text/css">
   img{
     height: 150px;
   }

   </style>
 <script type="text/javascript">
 var quotes = {
 maxpayne: {
 image: "http://images.gamersyde.com/thumb_image_max_payne_3-19012-1894_0002.jpg",
 quote: ["Собирать улики стало поздно ещё пару сотен патронов назад. Я так давно миновал точку невозвращения, что забыл, как она выглядит.", "Я бы засмеялся, если бы помнил, как это делается.", "Если единственный выбор является неправильным, то это скорее не выбор, а судьба.", "Закон ямы. Неважно сколько карабкался наверх-обратно слетишь в один миг.", "В жизни есть вещи, которые ты не выбираешь — это то, как ты себя чувствуешь.", "Боязнь смерти заставляет нас контролировать эмоции — но без страсти Вы уже мертвы.", "Чем быстрее бежишь, тем больше кажется, что тебя в самом деле преследуют.", "Твои права зачитают тебе на похоронах.", "Намек был таким же туманным и неопределенным, как пуля в сердце.", "Дуло ее пистолета смотрело мне в лицо. Я ответил любезностью на любезность.",
 "Положение быстро менялось от плохого к худшему.", "Рано или поздно обнаруживаешь, что леди удача — обыкновенная проститутка, а у тебя закончились наличные.", "Когда люди выходят из себя, они начинают совершать ошибки. Это я знал по собственному опыту.", "Как только я вошел, он завял, как двойка перед флеш-роялем.", "Иногда надо упасть, чтобы потом встать.", "Нет ничего, кроме пути вперед.", "Меняются твои взгляды, меняешься и ты.", "Спастись — это не для меня. Хэппи-энда не будет.", "Я чувствовал себя мёртвым. Я был мертв внутри."]
 },
test: {
 image: "http://grammatiki.net/wp-content/uploads/2012/01/test.gif.png",
 quote: ["Собирать улики стало поздно ещё пару сотен патронов назад. Я так давно миновал точку невозвращения, что забыл, как она выглядит.", "Я бы засмеялся, если бы помнил, как это делается.", "Если единственный выбор является неправильным, то это скорее не выбор, а судьба.", "Закон ямы. Неважно сколько карабкался наверх-обратно слетишь в один миг.", "В жизни есть вещи, которые ты не выбираешь — это то, как ты себя чувствуешь.", "Боязнь смерти заставляет нас контролировать эмоции — но без страсти Вы уже мертвы.", "Чем быстрее бежишь, тем больше кажется, что тебя в самом деле преследуют.", "Твои права зачитают тебе на похоронах.", "Намек был таким же туманным и неопределенным, как пуля в сердце.", "Дуло ее пистолета смотрело мне в лицо. Я ответил любезностью на любезность.",
 "Положение быстро менялось от плохого к худшему.", "Рано или поздно обнаруживаешь, что леди удача — обыкновенная проститутка, а у тебя закончились наличные.", "Когда люди выходят из себя, они начинают совершать ошибки. Это я знал по собственному опыту.", "Как только я вошел, он завял, как двойка перед флеш-роялем.", "Иногда надо упасть, чтобы потом встать.", "Нет ничего, кроме пути вперед.", "Меняются твои взгляды, меняешься и ты.", "Спастись — это не для меня. Хэппи-энда не будет.", "Я чувствовал себя мёртвым. Я был мертв внутри."]
 }
 };


 function handler(event)
 { event.preventDefault();  //отмена перезагрузки страницы
   var keysItem = Object.keys(quotes);// массив всех ключей  обьекта  quotes
   var key = keysItem[keysItem.length *  Math.random()|0]; // выбор случайного ключа
   var src = quotes[key].image;
   var text = quotes[key].quote;//массив цитат
   text = text[text.length *  Math.random()|0];//  выбор случайной цитаты
   document.querySelector('#quotes').innerHTML = '<h1>'+key+'</h1><img src="'+src+'" alt=""><p>'+text+'</p>' //вывод на страниицу
 }
 window.addEventListener('DOMContentLoaded', function() { // после загрузки страницы
 document.querySelector('button').addEventListener("click", handler); // поставить на клик по button вызов  функции handler
     });


 </script>
 </head>
 <body>
 <form>

 <div>
 <p id="quotes"></p>
 <button>Следующая цитата</button>
 </div>
 </form>

 </body>
 </html>

Спасибо большое, извините за грубость, устал с кем не бывает больше не повториться, ещё раз спасибо.

Можете поставить комментарии в function handler и то что ниже ее?