3

私はプログラミングの世界に比較的慣れていません。私は HTML と CSS の知識が豊富で、最近 JavaScript を手に入れました。私は学校のプロジェクトとして一連のテキスト ジェネレーターに取り組んでいます。私の目標は、Web サイトでボタンをクリックすると、ボタンをクリックするたびにコンピューターがランダムなテキストを吐き出すようにすることです。ただし、HTML と JavaScript についてはよく理解していますが、この 2 つを組み合わせて Web ページの機能を提供する方法についての知識はほとんどありません。

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()あなたは良いはずです。現在は屋外にあるため、生成されるのは 1 回だけです。

于 2013-09-05T02:32:45.373 に答える
0

すでに述べたように、主な問題は、侮辱の作成が関数の外部にあるため、関数が呼び出されるたびに作成されるのではなく、一度だけ作成されることです。私はコードのリファクタリングを本当に楽しんでいます。これを提供したかったのです: (ライブデモはここをクリック)

オブジェクト指向パターンを使用してアプリを作成し、多くの混乱と非効率性をクリーンアップしました。これを勉強して、できる限り学ぶことは、あなたにとってとても良いことだと思います!! ちなみに、意味のあるフレームワーク (AngularJS など) を使用していない限り、インライン JavaScript (HTML のクリック機能) を使用しないでください。

<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 に答える