Question

我正在尝试创建一个按钮，在点击时，用3个随机单词和2个预设单词填充其旁边的输入框。

我有5个单词与JQuery＆amp; 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>

Answer 1

试试这个：

$('#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>');
});

小提琴：https://jsfiddle.net/DinoMyte/fy1asfws/24/

Answer 2

基本上，正如我从jsfiddle链接中看到的那样，您的问题归结为如何设置输入字段的value属性。

当您使用jQuery时，可以使用val() method。

来完成

为您的发电机采取行动：

$('input[name=message]').val(insultFunctionWord1() + insultFunctionWord2());

Answer 3

如果你有三个单词并且需要将它们放在<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);

Answer 4

听起来你唯一的问题是如何设置文本输入的值。使用jQuery的val方法将文本输入的值设置为您构造的完整句子。参见：

http://api.jquery.com/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);

正如其他人所建议的那样，您还可以改进选择随机单词的方法，使其更具可重用性。

Answer 5

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>

试图制作短语生成器

5 个答案: