我想創建一個按鈕，點擊後，填充一個輸入框位於旁邊有3個隨機詞和2個預設詞。試圖做一個詞組發生器
我有5個詞與JQuery & JavaScript進入<p>標籤截至目前，但我不知道如何讓他們進入輸入框。
這裏是我迄今爲止對JavaScript的： jsfiddle link
它迫使我把一些代碼，所以這裏是HTML短量我有它。
<h1>Shakespearean Insult Generator</h1>
<div>
<p id=word4></p>
<p id=word1></p>
<p id="word2"></p>
<p id="word3"></p>
<p id=word5></p>
</div>
<input type="text" name="message" size="50" value="Thou">
<button id="wordGen">Click Me!</button>
這聽起來像你唯一的問題是如何設置文本輸入的值。使用jQuery的val方法來設置輸入到您構建的完整句子的文本值。請參閱：
你應該給文本輸入一個id屬性（不是必要的，因爲你可以通過名稱來選擇），例如。
<input type="text" name="message" size="50" value="Thou" id="finalMessage">
，然後像這樣來選擇要設置的值：
// construct the sentence
var finalMessage = 'Thou ' + words1[getWord1()] + ' ' + words2[getWord2()] + ' ' + words3[getWord3()];
// set the value of the text input to the sentence
$("#finalMessage").val(finalMessage);
正如其他人所建議的，你也可以提高你選擇一個隨機單詞，以使其更可重複使用的方法。
試試這個：
$('#wordGen').click(function() {
$('#word1').html("");
$('#word2').html("");
$('#word3').html("");
$('#word1').append('<input value="' + words1[getWord1()] + '"></input>');
$('#word2').append('<input value="' + words2[getWord2()] + '"></input>');
$('#word3').append('<input value="' + words3[getWord3()] + '"></input>');
});
從本質上講，我可以從的jsfiddle鏈接看到，你的問題可以歸結爲如何設置輸入字段的值屬性。
在使用jQuery時，可以使用val() method來完成此操作。
在您的發電機動作：
$('input[name=message]').val(insultFunctionWord1() + insultFunctionWord2());
如果您有三個字，你需要把它們放在<input>，那麼你需要使用$("#message").val()設置爲輸入的文本。另外，要使其工作，您需要將id="message"添加到<input>標籤，以便它變爲<input type="text" id="message" name="message" size="50" value="Thou">。例如，你的代碼可能是這樣的：
val word1 = words1[getWord1()];
val word2 = words1[getWord2()];
val word3 = words1[getWord3()];
$('#word1').text(word1);
$('#word2').text(word2);
$('#word3').text(word3);
$("#message").val(word1 + " " + word2 + " " + word3);
的javascript替代是一樣簡明寫入溶液jQuery（和，可以說，可以進一步略）：
function getWord(i) {
var randomNumber = Math.floor(Math.random() * words[(i-1)].length);
return words[(i-1)][randomNumber];
}
document.querySelector('#wordGen').onclick = function() {
var insult = getWord(1) + ' ' + getWord(2) + ' ' + getWord(3);
document.querySelector('input').value = insult;
}
這裏是普通的香草javascript完整的解決方案：
var words = [
['artless',
'bawdy',
'beslubbering',
'bootless',
'churlish',
'cockered',
'clouted',
'craven',
'currish',
'dankish',
'dissembling',
'droning',
'errant',
'fawning',
'fobbing',
'froward',
'frothy',
'gleeking',
'goatish',
'gorbellied',
'impertinent',
'infectious',
'jarring',
'loggerheaded',
'lumpish',
'mammering',
'mangled',
'mewling',
'paunchy',
'pribbling',
'puking',
'puny',
'qualling',
'rank',
'reeky',
'roguish',
'ruttish',
'saucy',
'spleeny',
'spongy',
'surly',
'tottering',
'unmuzzled',
'vain',
'venomed',
'villainous',
'warped',
'wayward',
'weedy',
'yeasty',
],
['base-court',
'bat-fowling',
'beef-witted',
'beetle-headed',
'boil-brained',
'clapper-clawed',
'clay-brained',
'common-kissing',
'crook-pated',
'dismal-dreaming',
'dizzy-eyed',
'doghearted',
'dread-bolted',
'earth-vexing',
'elf-skinned',
'fat-kidneyed',
'fen-sucked',
'flap-mouthed',
'fly-bitten',
'folly-fallen',
'fool-born',
'full-gorged',
'guts-griping',
'half-faced',
'hasty-witted',
'hedge-born',
'hell-hated',
'idle-headed',
'ill-breeding',
'ill-nurtured',
'knotty-pated',
'milk-livered',
'motley-minded',
'onion-eyed',
'plume-plucked',
'pottle-deep',
'pox-marked',
'reeling-ripe',
'rough-hewn',
'rude-growing',
'rump-fed',
'shard-borne',
'sheep-biting',
'spur-galled',
'swag-bellied',
'tardy-gaited',
'tickle-brained',
'toad-spotted',
'unchin-snouted',
'weather-bitten',
],
['apple-john',
'baggage',
'barnacle',
'bladder',
'boar-pig',
'bugbear',
'bum-bailey',
'canker-blossom',
'clack-dish',
'clotpole',
'coxcomb',
'codpiece',
'death-token',
'dewberry',
'flap-dragon',
'flax-wench',
'flirt-gill',
'foot-licker',
'fustilarian',
'giglet',
'gudgeon',
'haggard',
'harpy',
'hedge-pig',
'horn-beast',
'hugger-mugger',
'joithead',
'lewdster',
'lout',
'maggot-pie',
'malt-worm',
'mammet',
'measle',
'minnow',
'miscreant',
'moldwarp',
'mumble-news',
'nut-hook',
'pigeon-egg',
'pignut',
'puttock',
'pumpion',
'ratsbane',
'scut',
'skainsmate',
'strumpet',
'varlot',
'vassal',
'whey-face',
'wagtail',
]
];
function getWord(i) {
var randomNumber = Math.floor(Math.random() * words[(i-1)].length);
return words[(i-1)][randomNumber];
}
document.querySelector('#wordGen').onclick = function() {
var insult = getWord(1) + ' ' + getWord(2) + ' ' + getWord(3);
document.querySelector('input').value = insult;
}button {
background-image: url('https://media.giphy.com/media/URZcG7uLd9h4s/giphy.gif');
background-size: 100px 130px;
height: 250;
width: 250;
//background-size: auto;
font: 15px Verdana, sans-serif;
}
h1 {
font: 35px Arial, sans-serif;
}<h1>Shakespearean Insult Generator</h1>
<input type="text" size="30" />
<button id="wordGen">Click Me!</button>
無論如何，對於javascript部分，我會讓我們一個檢索單詞的函數和一個單詞的多維數組。您的代碼現在不可重複使用，因爲如果有一天您想要添加另一個單詞，則必須定義另一個函數 –
https://jsfiddle.net/fy1asfws/23/ –
您的函數結構應該不同。正如你所看到的，你有3個幾乎完全相同的函數，按名稱返回word（不是索引）。我會做一些類似'function getWord（words）{ return words [Math.floor（Math.random（）* words.length）]; }'然後稱之爲'$（'＃word1'）。text（getword（words1））;' – BoltKey