HTML/Javascript - кнопка onClick вызывающая функция с переменными

Question

Итак, у меня есть интернет-магазин, у меня есть кнопка, вызывающая функцию с именем purchase(), но в Javascript эта функция имеет purchase(name, amount). Итак, вы можете положить имя легко, в функцию onclick onclick="purchase('milk'), но моя проблема в том, как я мог бы положить сумму? Количество выбирается из элемента <select>.

Я создал somekind из JSFiddle, так что вы можете взглянуть: https://jsfiddle.net/w2bk9hw8/

Answer 1

Использование JQuery вы могли бы сделать это;

<button class="button" onclick="payment('milk', $('select').val())">$1.85</button> 

Answer 2

В этом нет ничего странного. Вам просто нужно написать funcion и вызвать его.

function purchase(product){ 
 
     var select = document.querySelector("select#id"); 
 
     alert('You have ordered '+select.value+' unit(s) of ' + product); 
 
    }

<select id="id"> 
 
    <option value="1">1</option> 
 
    <option value="2">2</option> 
 
    <option value="3">3</option> 
 
    <option value="4">4</option> 
 
    <option value="5">5</option> 
 
    </select> 
 
    <button onclick="purchase('milk')">test</button>

Answer 3

function payment(name, amount) { 
 
     console.log(amount,name); 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="quantity"> 
 
    <option value="1">1</option> 
 
    <option value="2">2</option> 
 
    <option value="3">3</option> 
 
    <option value="4">4</option> 
 
    <option value="5">5</option> 
 
</select> 
 
<button class="button" onclick="payment('milk', $('#quantity').val())">$1.85</button>

И найти Fiddle

Пожалуйста, отметьте это, если он работает для вас

Answer 4

это должен работать (чистый Javascript):

<select id="amount"> 
    <option>1</option> 
    <option>2</option> 
    <option>3</option> 
    <option>4</option> 
    <option>5</option> 
</select> 
<button class="button" onclick="order('milk', getAmount)">$1.85</button> 

<script> 
    function order(name, amount) { 
    alert(name); 
    alert(getAmount()); 
    } 

    function getAmount(){ 
    return document.getElementById('amount').value 
    } 

</script> 

Answer 5

Дайте выберите идентификатор, а затем это очень просто:

<select id="target-select"> 
 
    <option>1</option> 
 
    <option>2</option> 
 
    <option>3</option> 
 
    <option>4</option> 
 
    <option>5</option> 
 
</select> 
 
<button class="button" onclick="payment('milk', document.getElementById('target-select').value)">$1.85</button> 
 

 
<script> 
 
    function payment(name, amount) { 
 
    alert(name); 
 
    alert(amount); 
 
    } 
 

 
</script>

Answer 6

Учитывая, как ответы на момент размещения в JQuery, я предоставляю один в JS.

Предоставление значения каждого параметра

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

<option value="2">2</option> 

Получение значения выбранного параметра

Чтобы получить значение кнопки выбора, вы можете получить доступ к кнопке с помощью document.getElementById («Сель») и использовать .value оператора получите выбранную опцию.

document.getElementById('sel').value) 

Ниже вы найдете фрагмент.

function order(name, amount) { 
 
    alert(name); 
 
    alert(amount); 
 
    }

<select id="sel"> 
 
    <option value="1">1</option> 
 
    <option value="2">2</option> 
 
    <option value="3">3</option> 
 
    <option value="4">4</option> 
 
    <option value="5">5</option> 
 
</select> 
 
<button class="button" onclick="order('milk',document.getElementById('sel').value)">$1.85</button>

Answer 7

Вы можете сделать что-то вроде этого:

$('#myselect').on('click', function(){ 
 
var value = $('#myselect option:selected').val(); 
 
$('button').html(value +'$'); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> 
 
<select id="myselect"> 
 
    <option>1</option> 
 
    <option>2</option> 
 
    <option>3</option> 
 
    <option>4</option> 
 
    <option>5</option> 
 
</select> 
 
<button class="button">$1.85</button>

Answer 8

JQuery менее решение может быть:

<div id="milkItem" class="shopping-item"> 
    <div class="name">Milk</div> 
    <div class="item-image"></div> 
    <div class="item-descriptor">Description of your item</div> 

    <select class="qtySelector"> 
     <option value="1">1</option> 
     <option value="2">2</option> 
    </select> 

    <button 
     onclick="payment(document.getElementById('milkItem').getElementsByClassName('name')[0], 
     document.getElementById('milkItem').getElementsByClassName('qtySelector')[0].value)"> 
       Add to cart 
    </button> 
</div> 

Answer 9

Ибо если вы ВГА e несколько кнопок на странице ...

$('button').on('click', function() { 
    payment('milk', $(this).attr("value")); 
});