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

Question

I am developing an application in which the user must write in a text type input (or numeric type) the percentage in which they dominate a skill and I want the progress bar to automatically have that value. I need help with that, preferably with PHP only (if possible), but no problem if you include JAVA, I just want it to work.

I used this java script code:

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

and my HTML code is :

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

Answer 1

You can do it like this below. You don't need to use jQuery in order to achieve it.

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>