如何让进度条获取文本类型输入的值？答案

【问题标题】：How do I make a progress bar get the value of a text-type input?如何让进度条获取文本类型输入的值？
【发布时间】：2017-05-25 09:35:56
【问题描述】：

我正在开发一个应用程序，其中用户必须在文本类型输入（或数字类型）中写入他们主导技能的百分比，并且我希望进度条自动具有该值。我需要这方面的帮助，最好只使用 PHP（如果可能的话），但如果你包含 JAVA 也没问题，我只想让它工作。

我使用了这个java脚本代码：

<script>
function myFunction() {
    document.getElementById("myProgress").value = $("#value");
}
</script>

我的 HTML 代码是：

<input type="number" id="value" max="100" step="10">
<button onclick="myFunction()">Try it</button>
<progress id="myProgress" value="22" max="100"></progress>

【问题讨论】：

我们无法为您编写代码，但我们可以更正您的代码（如有）。
好吧，您可以使用 jQuery 并在输入 blur 时检查用户输入的百分比是否正确，如果正确，只需将输入类型设置为 hidden 并创建进度条。只有php是不可能的。
嗨@guest271314，我使用了这个java脚本代码：我的 HTML 代码是这个但它不起作用
@SergioMendez 你有什么问题？ “但它不起作用” 你能在问题的文本中描述“不起作用”，创建一个 stacksn-ps 来演示吗？见stackoverflow.com/help/how-to-ask、stackoverflow.com/help/mcve
请用可读格式的代码更新您的问题。

标签： javascript php progress-bar textinput

【解决方案1】：

您可以在下面这样做。你不需要使用 jQuery 来实现它。

function func() {
    var x = document.getElementById("myProgress");		  
    
    x.value = document.getElementById("value").value;
}

<input type="number" id="value" max="100" step="10">
<button onclick="func()">Try it</button>
<progress id="myProgress" value="10" max="100"></progress>

【讨论】：

【解决方案2】：

如果我正确理解您的问题，您希望在用户输入您的文本输入时更新进度条。您想为“keyup”操作添加一个事件侦听器，因此每当用户释放其中一个键时，它将执行您放入事件侦听器主体的代码。

document.addEventListener("keyup", () => {

// code to update the progressbar styles here

}, false);

【讨论】：