使用 javascript/jQuery 在文本输入中生成随机数

Question

I'm trying to generate a random number into a text field. Unfortunately ID's are not an option here so I'm using classes as identifiers. I've tried a number of things but cannot seem to get this work.

HTML for input:

<div class="productAttributeRow productAttributeConfigurableEntryNumbersOnlyText">
    <div class="productAttributeLabel">
        <label>
            <span class="name">
                Hidden:   
            </span>
        </label>
    </div>
    <div class="productAttributeValue">
        <input type="text" class="Field validation" value="" size="5"  />
    </div>
</div>

I have tried:

var randomnumber = Math.floor(Math.random() * 11)
$('#BuyThis').click(function () {
    $(".productAttributeConfigurableEntryNumbersOnlyText.productAttributeValue input[type="
    text "]").val(randomnumber);
});

In the above scenario, #BuyThis is a button:

<a id="BuyThis" type="button" class="btn btn-small btn-warning" href="#product-options" data-toggle="modal">

However, it's not necessary this happen with a click, I just want a random number in the field before the form is submitted.

Also tried without the click:

$(function(){
   var randomnumber=Math.floor(Math.random()*11)    
   $('.productAttributeConfigurableEntryNumbersOnlyText.productAttributeValue input[type="text"]').val( randomnumber );      

})

Another attempt:

function randomNumber(m, n) {
    m = parseInt(m);
    n = parseInt(n);
    randomnumber = Math.floor(Math.random() * (n - m + 1)) + m;
    ('.productAttributeConfigurableEntryNumbersOnlyText.productAttributeValue input[type="text"]').value = randomnumber;
});

Tried various other functions and combinations to no avail.

Answer 1

The div with class productAttributeValue is inside productAttributeConfigurableEntryNumbersOnlyText , so when selecting you should add a space between them:

 $(function() { var randomnumber = Math.floor(Math.random() * 11) $('.productAttributeConfigurableEntryNumbersOnlyText .productAttributeValue input[type="text"]').val(randomnumber); })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> <div class="productAttributeRow productAttributeConfigurableEntryNumbersOnlyText"> <div class="productAttributeLabel"> <label> <span class="name">Hidden:</span> </label> </div> <div class="productAttributeValue"> <input type="text" class="Field validation" value="" size="5" /> </div> </div>

Does work: http://jsfiddle.net/3hhCx/

Answer 2

$('.productAttributeConfigurableEntryNumbersOnlyText.productAttributeValue')

Is selecting an element which has both .productAttributeConfigurableEntryNumbersOnlyText and .productAttributeValue .

You want to select an element which has .productAttributeValue which is a child of .productAttributeConfigurableEntryNumbersOnlyText .

To do that, add a space between them:

$('.productAttributeConfigurableEntryNumbersOnlyText .productAttributeValue')

To insert a random value, use:

var randomnumber=Math.floor(Math.random()*11)    
$('.productAttributeConfigurableEntryNumbersOnlyText .productAttributeValue input[type="text"]').val( randomnumber ); 

Answer 3

try this... HTML

<div class="productAttributeRow productAttributeConfigurableEntryNumbersOnlyText">
    <div class="productAttributeLabel">
        <label>
            <span class="name">
                Hidden:   
            </span>
        </label>
    </div>
    <div class="productAttributeValue">
        <input type="text" class="Field validation" value="" size="5"  />
    </div>

javascript:

var randomnumber=Math.floor(Math.random()*11)    

$('#BuyThis').click(function(){    
  $(".productAttributeConfigurableEntryNumbersOnlyText .productAttributeValue input:text").val( randomnumber ); 
});

try Demo