Modifier la valeur d'un bouton lorsque vous cliquez sur

Question

J'ai une liste de blagues que je veux afficher dans une boîte. Lorsque la page est chargée, je veux en afficher une au hasard dans la boîte. Ensuite, lorsque je clique sur la case, je veux qu'elle change de nouveau la valeur à une autre valeur aléatoire de la liste. Pour l'instant, je n'arrive pas à le faire fonctionner et je n'arrive pas à comprendre où je me trompe. J'ai le code HTML comme suit:

<input class="box" type="button" value"" /> 
<ul> 
    <li>How much do pirates pay to get their ear pierced? &lt;/br&gt; A buck anear!</li> 
    <li>How do pirates talk to one another? &lt;/br&gt; Aye to aye!</li> 
    <li>What did the sea say to the pirate captain? &lt;/br&gt; Nothing, it justwaved!</li> 
    <li>What is a pirates favourite shop? &lt;/br&gt; Ar-gos!</li> 
    <li>When is it the best time for a pirate to buy a ship? &lt;/br&gt; Whenit is on sail!</li> 
</ul> 

Le script est:

$(document).ready(function() { 

    var list = $("ul li").toArray(); 
    var elemlength = list.length; 
    var randomnum = Math.floor(Math.random() * elemlength); 
    var randomitem = list[randomnum]; 

    $('.box').click(function() { 
     $(this).val(randomitem); 
    }); 
}); 

Quelqu'un peut-il s'il vous plaît me montrer comment faire le bouton ont une valeur lorsque la page est chargée puis modifiez la valeur lorsque la le bouton est cliqué.

Fiddle: http://jsfiddle.net/uRd6N/98/

Answer 1

Eh bien, vous avez deux problèmes. Le premier est que vous sélectionnez toujours la même blague (déterminée lorsque la page est chargée). La seconde est que vous ajoutez l'élément entier li à la valeur du bouton.

Essayez ceci:

$(document).ready(function() { 
    var list = $("ul li").toArray(); 
    var elemlength = list.length; 

    $('.box').click(function() { 
     // get a new joke every time a button is clicked 
     var randomnum = Math.floor(Math.random() * elemlength); 
     var randomitem = list[randomnum].innerHTML; // use the HTML of the <li> 
     $(this).val(randomitem); 
    }); 
}); 

Un exemple concret: http://jsfiddle.net/NxdEc/

Answer 2

Vous n'avez pas besoin de charger un objet jQuery juste pour définir une valeur. De plus, votre randomitem nécessaire pour obtenir le innerText de manière explicite l'élément li

$(document).ready(function() { 

    var list = $("ul li").toArray(); 
    var elemlength = list.length; 
    var randomnum = Math.floor(Math.random() * elemlength); 
    var randomitem = list[randomnum].innerText; 

    $('.box').click(function() { 
     this.value = randomitem; 
    }); 
}); 

Answer 3

Substitut

$(this).val(randomitem); 

avec:

$(this).val($(randomitem).text()); 

PS: ou mieux encore

$(document).ready(function() { 

    var list = $("ul li"); 
    var elemlength = list.length; 
    var randomnum = Math.floor(Math.random() * elemlength); 
    var randomitem = list.eq(randomnum); 

    $('.box').click(function() { 
     this.value = randomitem.text(); 
    }); 
}); 

PPS: si vous vouliez faire le bouton un div vous pouvez simplement faire la même façon:

$(document).ready(function() { 

    var list = $("ul li"); 
    var elemlength = list.length; 
    var randomnum = Math.floor(Math.random() * elemlength); 
    var randomitem = list.eq(randomnum); 

    $('.box').click(function() { 
     $(this).html(randomitem.text()); 
    }); 
}) 

juste être sûr de changer la styiling du div parce qu'il ne regarderait pas la même que celle d'une entrée.

Answer 4

Vous devriez faire quelques changements dans votre code:

• Generate valeur aléatoire chaque fois que vous cliquez sur le bouton. Dans votre code, la valeur aléatoire est générée une seule fois.
• Affectez un texte d'élément, pas l'élément lui-même, en cliquant sur le bouton.
• Définissez une valeur initiale.

La génération aléatoire et l'encapsualtion d'affectation au sein d'une fonction seraient très utiles dans votre code.Ce code fonctionne maintenant (peut exécuter à http://jsfiddle.net/uRd6N/99/):

$(document).ready(function() { 
    var list = $("ul li").toArray(); 
    var elemlength = list.length; 

    // Encapsulate random value assignment within a function 
    var setRandomValue = function(element) { 
      var randomnum = Math.floor(Math.random() * elemlength); 
      var randomitem = list[randomnum]; 
      $(element).val($(randomitem).text()); 
    } 

    // Bind click button 
    $('.box').click(function() { 
     setRandomValue(this); 
    }); 

    // Set random value for the first time 
    setRandomValue($('.box')); 
}); 

Answer 5

Essayez ce violon (C'est une fourchette de vôtre): http://jsfiddle.net/darshanags/qHpkk/1/

HTML (mise à jour):

<input class="box" type="button" value="Value at page load" /> 

jQuery:

$(document).ready(function() { 

    $('.box').click(function() { 

    var $items = $("ul li"), 
     list = $items.toArray(), 
     elemlength = list.length, 
     randomnum = Math.floor(Math.random() * elemlength); 

    $(this).val($items.eq(randomnum).text()); 
    }); 
});