更改输入值 onclick 按钮 - 纯 javascript 或 jQuery
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18740713/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Change input value onclick button - pure javascript or jQuery
提问by Jaroslav Klim?ík
I have two buttons and if I click on some button I need to change value in input text and change total price (product price * value of button - 2 or 4 Qty).
我有两个按钮，如果我点击某个按钮，我需要更改输入文本中的值并更改总价（产品价格 * 按钮值 - 2 或 4 个数量）。
I know that it's simple but I'm not good in javascript or jQuery. Answer in jsfiddle would be best.
My jsfiddle is here http://jsfiddle.net/J7m7m/1/
我知道这很简单，但我不擅长 javascript 或 jQuery。jsfiddle 中的答案最好。
我的 jsfiddle 在这里http://jsfiddle.net/J7m7m/1/
My simple code:
我的简单代码：
Product price: 0
<br>
Total price: 0
<br>
<input type="button" onclick="change()" value="2
Qty">
<input type="button" value="4
Qty">
<br>
Total <input type="text" id="count" value="1">
回答by Mariyan
Another simple solution for this case using jQuery. Keep in mind it's not a good practice to use inline javascript.
对于这种情况，使用 jQuery 的另一个简单解决方案。请记住，使用内联 javascript 不是一个好习惯。
I've added IDs to html on the total price and on the buttons. Here is the jQuery.
我已经在总价和按钮上为 html 添加了 ID。这是jQuery。
$('#two').click(function(){
$('#count').val('2');
$('#total').text('Product price: 00');
});
$('#four').click(function(){
$('#count').val('4');
$('#total').text('Product price: 00');
});
回答by Vikash Pandey
Try This(Simple javascript):-
试试这个（简单的javascript）：-
<!DOCTYPE html>
<html>
<script>
function change(value){
document.getElementById("count").value= 500*value;
document.getElementById("totalValue").innerHTML= "Total price: $" + 500*value;
}
</script>
<body>
Product price: 0
<br>
<div id= "totalValue">Total price: 0 </div>
<br>
<input type="button" onclick="change(2)" value="2
Qty">
<input type="button" onclick="change(4)" value="4
Qty">
<br>
Total <input type="text" id="count" value="1">
</body>
</html>Hope this will help you..
希望能帮到你..
回答by bipen
using html5 data attribute...
使用 html5 数据属性...
try this
尝试这个
Html
html
Product price: $<span id="product_price">500</span>
<br>Total price: 0
<br>
<input type="button" data-quantity="2" value="2
Qty">
<input type="button" data-quantity="4" class="mnozstvi_sleva" value="4
Qty">
<br>Total
<input type="text" id="count" value="1">
JS
JS
$(function(){
$('input:button').click(function () {
$('#count').val($(this).data('quantity') * $('#product_price').text());
});
});
回答by JofryHS
And here is the non jQuery answer.
这是非 jQuery 答案。
Fiddle: http://jsfiddle.net/J7m7m/7/
小提琴：http: //jsfiddle.net/J7m7m/7/
function changeText(value) {
document.getElementById('count').value = 500 * value;
}
HTML slight modification:
HTML 轻微修改：
Product price: 0
<br>
Total price: 0
<br>
<input type="button" onclick="changeText(2)" value="2
Qty">
<input type="button" class="mnozstvi_sleva" value="4
Qty" onClick="changeText(4)">
<br>
Total <input type="text" id="count" value="1"/>
EDIT: It is very clear that this is a non-desired way as pointed out below (I had it coming). So in essence, this is how you would do it in plain old javascript. Most people would suggest you to use jQuery (other answer has the jQuery version) for good reason.
编辑：很明显，正如下面指出的那样，这是一种不受欢迎的方式（我有它来了）。所以本质上，这就是你在普通的旧 javascript 中的做法。大多数人会建议您使用 jQuery（其他答案有 jQuery 版本）是有充分理由的。
回答by Ganesh Nagare
This will work fine for you
这对你有用
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
function myfun(){
$(document).ready(function(){
$("#select").click(
function(){
var data=$("#select").val();
$("#disp").val(data);
});
});
}
</script>
</head>
<body>
<p>id <input type="text" name="user" id="disp"></p>
<select id="select" onclick="myfun()">
<option name="1"value="one">1</option>
<option name="2"value="two">2</option>
<option name="3"value="three"></option>
</select>
</body>
</html>
回答by Johan
My Attempt ( JsFiddle)
我的尝试（JsFiddle）
Javascript
Javascript
$(document).ready(function () {
$('#buttons input[type=button]').on('click', function () {
var qty = $(this).data('quantity');
var price = $('#totalPrice').text();
$('#count').val(price * qty);
});
});
Html
html
Product price:0
<br>Total price: $<span id='totalPrice'>500</span>
<br>
<div id='buttons'>
<input id='qty2' type="button" data-quantity='2' value="2
Qty">
<input id='qty2' type="button" class="mnozstvi_sleva" data-quantity='4' value="4
Qty">
</div>
<br>Total
<input type="text" id="count" value="1">
