Как сделать кнопку повторно используемой?

Question

Я относительно новичок в мире программирования. У меня крепкое знание HTML и CSS, а недавно я получил JavaScript. Я работаю над серией текстовых генераторов в качестве школьного проекта; моя цель состоит в том, чтобы на веб-сайте нажмите кнопку и компьютер выплевывает случайный текст каждый раз, когда вы нажимаете кнопку. Однако, хотя я хорошо разбираюсь в HTML и JavaScript, мои знания о том, как объединить эти два, чтобы обеспечить функциональность веб-страницы, практически отсутствуют.

Я создал «генератор шекспировских оскорблений» с использованием JavaScript, который является функциональным, и я выяснил, как добавить кнопку на страницу, чтобы при нажатии кнопки она печатала случайно созданное оскорбление на странице:

<script> 
var adjective1 = ["artless", "bawdy", "beslubbering"... 
var adjective2 = ["base-court", "bat-fowling", "beef-witted"... 
var noun = ["apple-john", "baggage", "barnacle"... 

var insult = "Thou art a " + adjective1[Math.floor(Math.random() * 60)] + ", " + adjective2[Math.floor(Math.random() * 60)] + ", " + noun[Math.floor(Math.random() * 60)] + "!"; 

var genInsult = function() { 
x=document.getElementById("replace"); 
x.innerHTML=insult;  
}; 
</script> 

<p id= "replace">Your insult will appear here!</p> 
<button type="button" onclick="genInsult()">Generate Insult</button> 

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

Итак, мой вопрос: как я могу сделать эту кнопку многоразовой с помощью JavaScript?

Я попытался найти ответ на свой вопрос, но проблема в том, что я настолько новичок в JavaScript, что мне часто не удается понять вопросы других людей и ответы на них. Кроме того, многие ответы ссылаются на jQuery, язык, который я не знаю. Если у кого-то есть решение в рамках JavaScript, я был бы чрезвычайно благодарен!

Возможно, я не знаю, как много нового, но я очень хочу учиться!

Answer 1

Переместить это:

var insult = "Thou art a " + adjective1[Math.floor(Math.random() * 60)] + ", " + adjective2[Math.floor(Math.random() * 60)] + ", " + noun[Math.floor(Math.random() * 60)] + "!"; 

в вашей genInsult() функции, и вы должны быть хорошо. Сейчас он снаружи, поэтому он будет генерировать только один раз.

Answer 2

Как уже говорилось, основная проблема заключается в том, что создание оскорбления вне вашей функции, поэтому оно создается только один раз, а не каждый раз, когда вызывается функция. Мне очень нравится код повторного факторинга, я хотел бы предложить вам следующее: (click here for live demo)

Я написал ваше приложение с использованием объектно-ориентированного шаблона и очистил много беспорядка и неэффективности. Я думаю, вам будет очень полезно изучить это и узнать все, что вы можете! Кстати, никогда не используйте встроенный javascript (функция click в вашем html), если вы не используете фреймворк, который его понимает (например, AngularJS).

<p id="insult">Your insult will appear here!</p> 
<button type="button" id="generate">Generate Insult</button> 

и ЯШ:

var generator = { //only one global variable!! 
    init: function() { //this sets up your app for use 
    var elem = document.getElementById('insult'); 

    var obj = this; //cache reference to the generator object (the "this" pointer will be changed within the click function 
    var button = document.getElementById('generate'); 
    button.addEventListener('click', function() { 
     elem.innerText = obj.generateInsult(); 
    }); 
    }, 
    generateInsult: (function() { //use an IIFE to give a nice closure to these variables 
    var generateInsult = function() { 
     return "Thou art a "+adjs1[r(adjs1)]+", "+adjs2[r(adjs2)]+", "+nouns[r(nouns)]+"!"; 
    }; 
    function r(arr) { 
     return Math.floor(Math.random() * arr.length); 
    } 
    var adjs1 = ["artless", "bawdy", "beslubbering"]; 
    var adjs2 = ["base-court", "bat-fowling", "beef-witted"]; 
    var nouns = ["apple-john", "baggage", "barnacle"]; 
    return generateInsult; 
    }()) 
}; 

generator.init(); //I suggest running this on document ready to be sure the elements are loaded. If not, this will not work. Keep that in mind!