Попытка создать генератор фраз

Question

Я пытаюсь создать кнопку, которая после нажатия заполняет поле ввода, расположенное рядом с ним, с 3 случайными словами и двумя запрограммированными словами.

У меня есть 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> 

Answer 1

Это звучит как единственная проблема с тем, как задать значение ввода текста. Используйте метод val для jQuery, чтобы установить значение ввода текста в полное предложение, которое вы создали. См:

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 2

Попробуйте это:

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

Fiddle: https://jsfiddle.net/DinoMyte/fy1asfws/24/

Answer 3

По существу, как я могу видеть из jsfiddle ссылки, ваш вопрос сводится к тому, как установить свойство значения поля ввода ,

Как вы используете jQuery, это можно сделать, используя val() method.

В действии для вашего генератора:

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

Answer 4

Если у вас есть три слова, и вы должны поместить их в <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 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>