Javascript 正在尝试生成短语生成器

我试图创建一个按钮，点击按钮后，它会用3个随机单词和2个预设单词填充它旁边的输入框

到目前为止，我已经将JQuery和Javascript中的5个单词放入了

标记中，但我一生都不知道如何将它们放入输入框中

以下是我到目前为止对JavaScript的了解：

这迫使我把一些代码放进去，所以这里是我为它准备的少量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>

莎士比亚侮辱发生器





点击我！

试试这个：

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

$（'#wordGen'）。单击（函数（）{
$（'#word1'）.html（“”）；
$（'#word2'）.html（“”）；
$（'#word3'）.html（“”）；
$（'#word1'）。附加（''）；
$（'#word2'）。附加（''）；
$（'#word3'）。附加（''）；
});

---

Fiddle:

从JSFIDLE链接中可以看出，您的问题归根结底是如何设置输入字段的value属性

在使用jQuery时，可以使用

为您的发电机执行以下操作：

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

---

如果您有三个单词，需要将它们放入

，则需要使用

$（“#message”）.val（）

设置输入文本。此外，要使其工作，您需要将

id=“message”

添加到

标记中，使其成为

。例如，您的代码可能如下所示：

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);

---

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

您应该给文本输入一个id属性（不需要，因为您可以通过名称选择），例如

---

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

可选的

javascript

与使用

jQuery

编写的解决方案一样简洁（可以进一步简化）：

以下是纯香草

javascript

的完整解决方案：

var单词=[
[‘自然’，
"淫秽",，
“贝斯鲁伯林”，
"无靴",，
“粗鲁的”，
“Cocker”，
“克洛特”，
“胆小鬼”，
“咖喱”，
“dankish”，
"掩饰",，
"嗡嗡",，
“误入歧途”，
"奉承",，
“fobbing”，
"向前",，
“泡沫的”，
"高兴",，
“goatish”，
“大腹便便”，
"无礼",，
"传染性",，
"刺耳",，
"红头",，
"笨",，
“妈妈”，
"破损",，
"喵喵",，
“大腹便便”，
"吹毛求疵",，
“呕吐”，
"弱小",，
"颤抖",，
"排名",，
"臭",，
"流氓",，
“发情”，
"俏皮",，
“脾脏”，
“海绵状”，
"粗暴",，
"蹒跚",，
“不戴口罩”，
“虚荣”，
"毒",，
“恶棍”，
"扭曲",，
“任性”，
“杂草”，
“酵母”，
],
[“基地球场”，
“蝙蝠捕鸟”，
“牛肉味”，
“甲虫头”，
“沸腾的头脑”，
“克拉珀爪”，
“白痴”，
“普通接吻”，
"歪头",，
“沉闷的梦”，
“眼花缭乱”，
"固执",，
"恐惧",，
"地球烦恼",，
“精灵皮肤”，
“被绑架的胖子”，
"吸",，
“口齿不清”，
"苍蝇咬",，
“愚蠢堕落”，
“傻瓜出生”，
“吃饱了”，
“肠子疼”，
"半面人",，
"急躁",，
“对冲出生”，
“该死的讨厌”，
"游手好闲",，
“不良繁殖”，
"教养不良",，
"多头",，
“牛奶肝”，
“杂念”，
“洋葱眼”，
"拔毛",，
“pottle deep”，
“痘标”，
"熟了",，
"粗凿",，
“粗制滥造”，
“臀部喂养”，
“碎片承载”，
"咬羊",，
"马刺擦伤",，
“大腹便便”，
“步履迟缓”，
“挠痒痒的脑袋”，
“斑点蟾蜍”，
'未插入的鼻子'，
"风雨交加",，
],
['apple-john'，
“行李”，
“藤壶”，
“膀胱”，
“野猪”，
“狗熊”，
“bum bailey”，
“溃疡花”，
"咔嗒",，
"冰柱",，
“coxcomb”，
"密码",，
“死亡令牌”，
“杜莓”，
"飞龙",，
“亚麻丫头”，
“调情吉尔”，
"舔脚者",，
"fustilian",，
“小玩意儿”，
"棍棒",，
“憔悴”，
“哈比”，
“篱笆猪”，
“角兽”，
“拥抱抢劫者”，
“joithead”，
“刘易斯特”，
“笨蛋”，
“喜鹊”，
“麦芽虫”，
“妈妈”，
“米尔斯”，
“小鱼”，
“恶棍”，
“moldwarp”，
"咕哝新闻",，
“螺母钩”，
“鸽子蛋”，
"猪仔",，
“puttock”，
“pumpion”，
“ratsbane”，
“人渣”，
“skainsmate”，
“strumpet”，
“瓦洛特”，
“附庸”，
“乳清脸”，
"摇尾巴",，
]
];
函数getWord（i）{
var randomNumber=Math.floor（Math.random（）*单词[（i-1）].长度）；
返回单词[（i-1）][randomNumber]；
}
document.querySelector（'#wordGen'）.onclick=function（）{
变量侮辱=getWord（1）+''+getWord（2）+''+getWord（3）；
document.querySelector（'input'）。值=侮辱；
}

按钮{
背景图像：url（'https://media.giphy.com/media/URZcG7uLd9h4s/giphy.gif' );
背景尺寸：100px 130px；
身高：250；
宽度：250；
//背景尺寸：自动；
字体：15px Verdana，无衬线；
}
h1{
字体：35px Arial，无衬线；
}

莎士比亚侮辱发生器
点击我函数getWord（words）{returnwords[Math.floor（Math.random（）*words.length）]}

的事情，然后像

$（'#word1'）.text（getwords（words1））一样调用它谢谢！这已经足够了，我可以自己编辑代码：）太好了。很高兴我能帮忙：）@BlakeBowling请考虑接受有效答案；）
<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);

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;
}