英文:
Why is not my user input in HTML webpage taken and stored as a variable data?
问题
The code you provided is in HTML and JavaScript. To fix the issue and replace "55" with the user's actual input, you can update the JavaScript code as follows:
var g = document.getElementById("al").value;
function start() {
var userInput = parseFloat(g);
document.getElementById("test2").innerHTML = "Output is here: " + userInput;
}
With this change, the value entered by the user in the input field will be displayed as part of the output message when the button is clicked.
英文:
Consider the code I have:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
var g = document.getElementById("al").value;
function start() {
document.getElementById("test2").innerHTML = typeof(g) + parseFloat(g);
}
<!-- language: lang-html -->
<p id="test2">Output is here:</p>
<form>
<label for="g">a:</label>
<input type="number" id="al" name="g" placeholder="Enter a" value="55">
<button onclick="start()" type="button">Here</button>
</form>
<!-- end snippet -->
The output I get on clicking the button is string55, whatever the user input is. I want to fix it and replace 55 with user's actual input. What is the fix then?
答案1
得分: 1
Sure, here are the translated parts:
你需要从函数内部获取值：
function start() {
var g = document.getElementById("al").value;
document.getElementById("test2").innerHTML = typeof(g) + parseFloat(g);
}
<p id="test2">这里是输出：</p>
<form>
<label for="g">a：</label>
<input type="number" id="al" name="g" placeholder="输入a" value="55">
<button onclick="start()" type="button">这里</button>
</form>
请注意，使用内联的HTML on* 处理程序被认为是不良的编程习惯。它难以调试。JavaScript 应该只出现在一个地方，而不是使用 Element.addEventListener()：
const elBtn = document.querySelector("#start");
const elTest = document.querySelector("#test2");
const elG = document.querySelector("[name=g]");
const printGValue = () => {
const g = elG.value;
elTest.textContent = typeof(g) + parseFloat(g);
};
// 点击时执行
elBtn.addEventListener("click", printGValue);
// 初始化时执行：
printGValue();
<form>
<label>
a: <input type="number" name="g" placeholder="输入a" value="55">
</label>
<button id="start" type="button">这里</button>
</form>
<p id="test2"></p>
英文:
You need to grab the value from within the function:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
function start() {
var g = document.getElementById("al").value;
document.getElementById("test2").innerHTML = typeof(g) + parseFloat(g);
}
<!-- language: lang-html -->
<p id="test2">Output is here:</p>
<form>
<label for="g">a:</label>
<input type="number" id="al" name="g" placeholder="Enter a" value="55">
<button onclick="start()" type="button">Here</button>
</form>
<!-- end snippet -->
PS, using inline HTML on* handlers is considered bad programming habit. It's hard to debug. JS should be in one place only, instead, use Element.addEventListener()
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
const elBtn = document.querySelector("#start");
const elTest = document.querySelector("#test2");
const elG = document.querySelector("[name=g]");
const printGValue = () => {
const g = elG.value;
elTest.textContent = typeof(g) + parseFloat(g);
};
// Do on click
elBtn.addEventListener("click", printGValue);
// And on init:
printGValue();
<!-- language: lang-html -->
<form>
<label>
a: <input type="number" name="g" placeholder="Enter a" value="55">
</label>
<button id="start" type="button">Here</button>
</form>
<p id="test2"></p>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论