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

How do I make a progress bar get the value of a text-type input?

我正在开发一个应用程序,用户必须在其中以文本类型输入(或数字类型)写入他们控制技能的百分比,我希望进度条自动具有该值。我需要这方面的帮助,最好只使用 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 来实现它。

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>

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

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

// code to update the progressbar styles here

}, false);