Можно ли объединить функцию document.ready и функцию нажатия кнопки?

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

Мне интересно, смогу ли я объединить эту функцию document.ready:

    $(document).ready(function(){
      var W = randomWord('W'),
        W2 = randomWord('W'),
        X = randomWord('X'),
        Y = randomWord('Y'),
        Y2 = randomWord('Y'),
        Z = randomWord('Z');
      var names = ['The ' + W + ' & ' + W2 + ' ', 'The ' + X + ' ' + W + ' ', 'The ' + W + "'s " + Y + ' ', 'The ' + Z + ' ' + W + ' ', 'The ' + Y + ' & ' + Y2 + ' ', 'The ' + W + " & " + Y + ' ', 'The ' + Z + ' ' + Y + ' ', 'The ' + X + ' ' + Y + ' '];
      var name = names[Math.floor(Math.random() * names.length)];
      var container = document.getElementById('output');
      container.innerHTML = name;
    });

с моей функцией нажатия кнопки:

$('.button').click(function() {
  var W = randomWord('W'),
    W2 = randomWord('W'),
    X = randomWord('X'),
    Y = randomWord('Y'),
    Y2 = randomWord('Y'),
    Z = randomWord('Z');
  var names = ['The ' + W + ' & ' + W2 + ' ', 'The ' + X + ' ' + W + ' ', 'The ' + W + "'s " + Y + ' ', 'The ' + Z + ' ' + W + ' ', 'The ' + Y + ' & ' + Y2 + ' ', 'The ' + W + " & " + Y + ' ', 'The ' + Z + ' ' + Y + ' ', 'The ' + X + ' ' + Y + ' '];
  var name = names[Math.floor(Math.random() * names.length)];
  var container = document.getElementById('output');
  container.innerHTML = name;

Они имеют одинаковую функцию, но с двумя разными триггерами.

Могу ли я сделать что-то вроде...?

    $(document).ready(function(), $('.button').click(function(){
codecodecode
});

Спасибо!

(для целей тестирования весь код: https://jsfiddle.net/mpqf68tg/)

<div style="width: 100%; text-align: center;">
  <h2 style="font-size:  48pt; font-family: Fredericka the Great;" id="output" class="button">&nbsp;</h2>
</div>

<script>
    var words = {
      W: ['ace', 'axman', 'archer', 'ale', 'bastard', 'dragon', 'badger', 'ax', 'blade', 'fool', 'battlement', 'bear', 'bull', 'hawk', 'bridge', 'bee', 'cat', 'highwayman', 'brook', 'boar', 'cock', 'hound', 'castle', 'duke', 'dog', 'idiot', 'city', 'dutchess', 'hammer', 'mage', 'clock', 'fire', 'jack', 'manticore', 'deer', 'fish', 'king', 'mare', 'eagle', 'flag', 'knife', 'mouse', 'goat', 'lion', 'ladies', 'prince', 'mace', 'mole', 'maiden', 'princess', 'mule', 'mountain', 'nightmare', 'ram', 'potion', 'nymph', 'plough', 'man', 'rat', 'river', 'sea', 'queen', 'snake', 'shark', 'ship', 'rogue', 'sorrow', 'shield', 'trap', 'sow', 'sword', 'soldier', 'virgin', 'swallow', 'widow', 'tree', 'wasp', 'wizards', 'wyrm', 'village', 'wolf'],
      X: ['belching', 'crushing', 'dreaming', 'drinking', 'drowning', 'fighting', 'laughing', 'laying', 'living', 'plotting', 'prancing', 'running', 'screaming', 'singing', 'sleeping', 'sneaking', 'snoozing', 'stabbing', 'starving', 'swinging'],
      Y: ['cart', 'child', 'cup', 'dream', 'flagon', 'folly', 'fork', 'hearth', 'husband', 'inn', 'keep', 'knife', 'mug', 'nightmare', 'plate', 'plot', 'song', 'spoon', 'wagon', 'wife'],
      Z: ['bloodied', 'branded', 'bronzed', 'burnt', 'chipped', 'cracked', 'dropped', 'drowned', 'fallen', 'forgotten', 'frozen', 'full', 'half', 'quarter', 'rusted', 'soaked', 'spun', 'stabbed', 'tall', 'thirsty']
    };
    function randomWord(type) {
      var rando = Math.floor(Math.random() * words[type].length),
        word = words[type][rando];
      return word;
    }
    $(document).ready(function(){
      var W = randomWord('W'),
        W2 = randomWord('W'),
        X = randomWord('X'),
        Y = randomWord('Y'),
        Y2 = randomWord('Y'),
        Z = randomWord('Z');
      var names = ['The ' + W + ' & ' + W2 + ' ', 'The ' + X + ' ' + W + ' ', 'The ' + W + "'s " + Y + ' ', 'The ' + Z + ' ' + W + ' ', 'The ' + Y + ' & ' + Y2 + ' ', 'The ' + W + " & " + Y + ' ', 'The ' + Z + ' ' + Y + ' ', 'The ' + X + ' ' + Y + ' '];
      var name = names[Math.floor(Math.random() * names.length)];
      var container = document.getElementById('output');
      container.innerHTML = name;

    });
    $('.button').click(function(){
      var W = randomWord('W'),
        W2 = randomWord('W'),
        X = randomWord('X'),
        Y = randomWord('Y'),
        Y2 = randomWord('Y'),
        Z = randomWord('Z');
      var names = ['The ' + W + ' & ' + W2 + ' ', 'The ' + X + ' ' + W + ' ', 'The ' + W + "'s " + Y + ' ', 'The ' + Z + ' ' + W + ' ', 'The ' + Y + ' & ' + Y2 + ' ', 'The ' + W + " & " + Y + ' ', 'The ' + Z + ' ' + Y + ' ', 'The ' + X + ' ' + Y + ' '];
      var name = names[Math.floor(Math.random() * names.length)];
      var container = document.getElementById('output');
      container.innerHTML = name;

    });
</script>
Источник

2 ответа

Решение

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

var words = {
      W: ['ace', 'axman', 'archer', 'ale', 'bastard', 'dragon', 'badger', 'ax', 'blade', 'fool', 'battlement', 'bear', 'bull', 'hawk', 'bridge', 'bee', 'cat', 'highwayman', 'brook', 'boar', 'cock', 'hound', 'castle', 'duke', 'dog', 'idiot', 'city', 'dutchess', 'hammer', 'mage', 'clock', 'fire', 'jack', 'manticore', 'deer', 'fish', 'king', 'mare', 'eagle', 'flag', 'knife', 'mouse', 'goat', 'lion', 'ladies', 'prince', 'mace', 'mole', 'maiden', 'princess', 'mule', 'mountain', 'nightmare', 'ram', 'potion', 'nymph', 'plough', 'man', 'rat', 'river', 'sea', 'queen', 'snake', 'shark', 'ship', 'rogue', 'sorrow', 'shield', 'trap', 'sow', 'sword', 'soldier', 'virgin', 'swallow', 'widow', 'tree', 'wasp', 'wizards', 'wyrm', 'village', 'wolf'],
      X: ['belching', 'crushing', 'dreaming', 'drinking', 'drowning', 'fighting', 'laughing', 'laying', 'living', 'plotting', 'prancing', 'running', 'screaming', 'singing', 'sleeping', 'sneaking', 'snoozing', 'stabbing', 'starving', 'swinging'],
      Y: ['cart', 'child', 'cup', 'dream', 'flagon', 'folly', 'fork', 'hearth', 'husband', 'inn', 'keep', 'knife', 'mug', 'nightmare', 'plate', 'plot', 'song', 'spoon', 'wagon', 'wife'],
      Z: ['bloodied', 'branded', 'bronzed', 'burnt', 'chipped', 'cracked', 'dropped', 'drowned', 'fallen', 'forgotten', 'frozen', 'full', 'half', 'quarter', 'rusted', 'soaked', 'spun', 'stabbed', 'tall', 'thirsty']
};
function randomWord(type) {
  var rando = Math.floor(Math.random() * words[type].length),
    word = words[type][rando];
  return word;
}
function tavernName() {
var W = randomWord('W'),
    W2 = randomWord('W'),
    X = randomWord('X'),
    Y = randomWord('Y'),
    Y2 = randomWord('Y'),
    Z = randomWord('Z');
  var names = ['The ' + W + ' & ' + W2 + ' ', 'The ' + X + ' ' + W + ' ', 'The ' + W + "'s " + Y + ' ', 'The ' + Z + ' ' + W + ' ', 'The ' + Y + ' & ' + Y2 + ' ', 'The ' + W + " & " + Y + ' ', 'The ' + Z + ' ' + Y + ' ', 'The ' + X + ' ' + Y + ' '];
  var name = names[Math.floor(Math.random() * names.length)];
  var container = document.getElementById('output');
  container.innerHTML = name;
}
$(function(){
  tavernName();
  $('.button').click(function(){
    tavernName();
  });
});
Источник

ready() Метод используется, чтобы сделать функцию доступной после загрузки документа. Какой бы код вы ни написали внутри $(document ).ready() Метод будет запущен, когда DOM страницы будет готов выполнить код JavaScript.

$( document ).ready(function() {
    console.log( "ready!" );
});

Опытные разработчики иногда используют стенографию $() за $( document ).ready(),

$(function() {
    console.log( "ready!" );
});

Для вашей проблемы вы можете добавить $('.button').click() метод внутри $(document).ready() как ниже,

// option 1
$(document).ready(function(){
   $('.button').click(function(){});
});

// option 2
$(function(){
   $('.button').click(function(){});
});

Кроме этого, если вы хотите использовать этот метод нажатия кнопки, вы можете создать function() и звоните, когда вам это нужно.

function generateName() {
   var W = randomWord('W'),
   W2 = randomWord('W'),
   X = randomWord('X');
   ....
}

$(function(){
   $('.button').click(function(){
      generateName();
   });
});
Источник
Другие вопросы по тегам