英文:
having trouble changing Js variable to user input value from <input>
问题
以下是翻译的内容：
// Variables
const button = document.getElementById('button');
const returnChange = document.getElementById('return-change');
const returnStatus = document.getElementById('return-status');
const cid = [
['PENNY', 1.01],
['NICKEL', 2.05],
['DIME', 3.1],
['QUARTER', 4.25],
['ONE', 90],
['FIVE', 55],
['TEN', 20],
['TWENTY', 60],
['ONE HUNDRED', 100]
];
let cash = document.getElementById('payment');
let price = document.getElementById('price').value;
console.log(price);
console.log(cash);
console.log(cid);
<div id="price-div">
<form>
<label for="price">Purchase Price:
<input id='price' name='price' type="number" required />
</label>
</form>
</div>
<div id="payment-div">
<label for="payment"> Payment Amount:
<input id='payment' type="number" required />
</label>
</div>
<div id="button-div">
<button id="button" type="button">Return Change</button>
</div>
<div id="change">
<p id="return-change"></p>
<p id="return-status"></p>
</div>
请注意，我已经将HTML和JavaScript代码部分翻译成中文，但没有翻译代码中的变量名和标签属性名。如果您有任何其他问题，请随时提出。
英文:
There is a user input field in an HTML form. My intention is for the user's inputed value to become the value of the variable 'price'. I have been unable to figure out how to do this. Can someone please steer me in the right direction.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
// Variables
const button = document.getElementById('button');
const returnChange = document.getElementById('return-change');
const returnStatus = document.getElementById('return-status');
const cid = [
['PENNY', 1.01],
['NICKEL', 2.05],
['DIME', 3.1],
['QUARTER', 4.25],
['ONE', 90],
['FIVE', 55],
['TEN', 20],
['TWENTY', 60],
['ONE HUNDRED', 100]
];
let cash = document.getElementById('payment');
let price = document.getElementById('price').value;
console.log(price);
console.log(cash);
console.log(cid);
<!-- language: lang-html -->
<div id="price-div">
<form>
<label for="price" >Purchase Price:
<input id='price' name='price' type="number" required />
</label>
</form>
</div>
<div id="payment-div">
<label for="payment"> Payment Amount:
<input id='payment' type="number" required />
</label>
</div>
<div id="button-div">
<button id="button" type="button" >Return Change</button>
</div>
<div id="change">
<p id="return-change"></p>
<p id="return-status"></p>
</div>
<!-- end snippet -->
答案1
得分: 1
你可以使用addEventListener来实现：
const priceInput = document.getElementById("price");
const priceHandler = e => {
price = e.target.value;
console.log(price);
};
priceInput.addEventListener('input', priceHandler);
<form>
<label for="price">购买价格：
<input id='price' name='price' type="number" required />
</label>
</form>
<details>
<summary>英文:</summary>
You might want to use an [addEventListener][1]:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
const priceInput = document.getElementById("price");
const priceHandler = e => {
price = e.target.value;
console.log(price);
};
priceInput.addEventListener('input', priceHandler);
<!-- language: lang-html -->
<form>
<label for="price">Purchase Price:
<input id='price' name='price' type="number" required />
</label>
</form>
<!-- end snippet -->
[1]: https://developer.mozilla.org/fr/docs/Web/API/EventTarget/addEventListener
</details>
# 答案2
**得分**: -1
我们需要更多关于您尝试上述操作时看到的情况的详细信息。然而，从代码来看，有一些建议：
1) 您不需要"return getValue()"。仅使用"getValue()" 即可。
2) 您可以从返回的元素中获取值
```javascript
function getValue() {
let element = document.getElementById("price");
let value = element.value;
console.log(value)
}
<form onchange="getValue()">
<label for="price">购买价格：
<input id='price' name='price' type="number" required />
</label>
</form>
英文:
We need a little more detail on what you are seeing happen when you try the above. However, looking at the code, some suggestions:
- You don't need the 'return getValue()'. getValue() alone is fine.
- You can get the value from the element returned
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
function getValue() {
let element = document.getElementById("price");
let value = element.value;
console.log(value)
}
<!-- language: lang-html -->
<form onchange="getValue()">
<label for="price">Purchase Price:
<input id='price' name='price' type="number" required />
</label>
</form>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论