Estoy tratando de crear un botón que, al hacer clic, llene un cuadro de entrada ubicado justo al lado con 3 palabras aleatorias y 2 palabras predeterminadas.

Tengo las 5 palabras con JQuery y Javascript en las etiquetas <p> a partir de ahora, pero no puedo imaginar por mi vida cómo meterlas en el cuadro de entrada.

Esto es lo que tengo hasta ahora para JavaScript: enlace jsfiddle

Me está obligando a poner parte del código, así que aquí está la pequeña cantidad de HTML que tengo para ello.

<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>
3
Blake Bowling 25 ene. 2016 a las 20:48

5 respuestas

La mejor respuesta

Parece que su único problema es cómo configurar el valor de una entrada de texto. Use el método val de jQuery para establecer el valor de la entrada de texto en la oración completa que ha construido. Ver:

http://api.jquery.com/val/

Debería asignar al atributo de entrada un atributo de identificación (no es necesario, ya que podría seleccionar por nombre), por ejemplo.

<input type="text" name="message" size="50" value="Thou" id="finalMessage">

Y luego algo como esto para seleccionar y establecer su valor:

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

Como otros han sugerido, también podría mejorar su método de selección de una palabra aleatoria para hacerla más reutilizable.

0
mmccaff 25 ene. 2016 a las 18:00

Esencialmente, como puedo ver en el enlace jsfiddle, su pregunta se reduce a cómo establecer la propiedad de valor de un campo de entrada.

Como está utilizando jQuery, esto se puede hacer mediante el método val ().

En acción para su generador:

$('input[name=message]').val(insultFunctionWord1() + insultFunctionWord2());
0
Mi-Creativity 25 ene. 2016 a las 18:05

Pruebe esto :

$('#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/

0
DinoMyte 25 ene. 2016 a las 17:56

Si tiene sus tres palabras y necesita ponerlas en <input>, entonces necesita usar $("#message").val() para establecer el texto para la entrada. Además, para que esto funcione, debe agregar id="message" a la etiqueta <input> para que se convierta en <input type="text" id="message" name="message" size="50" value="Thou">. Por ejemplo, su código podría verse así:

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);
0
Cassidy Laidlaw 25 ene. 2016 a las 17:58

La alternativa javascript es tan concisa como las soluciones escritas en jQuery (y, podría decirse, podría abreviarse más):

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

Aquí está la solución completa en vainilla simple 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>
0
Rounin 25 ene. 2016 a las 19:24