3

我对编程世界还比较陌生。我对 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 领域有解决方案，我将不胜感激！

我现在可能不知道很多，但我非常渴望学习！

4

2 回答 2

3

移动这个：

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

在你的genInsult()职能范围内，你应该很好。现在它在外面，所以它只会生成一次。

于 2013-09-05T02:32:45.373 回答
0

如前所述，您的主要问题是侮辱的创建在您的函数之外，因此它只创建一次，而不是每次调用函数时。我真的很喜欢重构代码，我想为你提供这个：（点击这里查看现场演示）

我使用面向对象的模式编写了您的应用程序，并清理了很多混乱和低效率的地方。我认为学习这个并尽你所能地学习会对你有很大的帮助！！顺便说一句，除非您使用的是有意义的框架（如 AngularJS），否则永远不要使用内联 javascript（html 中的 click 函数）。

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

和js：

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!
于 2013-09-05T03:00:52.943 回答