I'm a bit confused, I try to pass the value from one input to another while I'm writing in the input, but nevertheless when consulting I find functions with JavaScript and JQuery that when applied, I don't know what's happening that hasn't worked for me, I have correctly included both the JQuery script as the link to the javascript script where I do the function, even the 'keyup' event when showing by console if it shows me, but when I finish assigning the value and doing the typing test it doesn't work. I appreciate if you can give me a hand. This is the HTML code:
<tr>
<td><input type="text" placeholder="Altura (m)" value="" class="mt-2 form-control" id="txtAltura1">
</td>
<td><h3>*</h3></td>
<td><input type="text" placeholder="Altura (m)" class="mt-2 form-control" id="txtAltura2"></td>
</tr>
I'm trying to get the input "txtHeight2" to take the value of "txtHeight1" while I'm typing. I currently have this script.
var txtAlura = document.getElementById('txtAltura1');
txtAlura.addEventListener('keyup', (event) =>{
var txtValor = event.path[0].value;
document.getElementById('txtAltura2').innerHTML = txtValor;
});
However, when reloading the page it does not work for me, the content is not copied. I downloaded the version from the official JQuery page.
<!-- Latest Compiled JQuery-->
<script type="text/javascript" src="js/jquery-3.5.1.min.js"></script>
I appreciate your help. [Updated] - Thank you very much for the answers, the question was solved but however there is an error or I don't know if this can affect my application later, it's like a crash or something like that appears in the console when loading the page.
The only problem was that you did not select the
value
input. Remember that to modify the content of the input, it is necessary to modify its value. This works better.you can use the oninput event which fires every time you type a letter. I also recommend you remove the value="" since sometimes it leaves the value forced and causes problems
value
instead ofinnerHTML
event.path[0].value;
, when all you need is to get the second input and assign the value of the firstAs an extra do not mix JavaScript code inside the HTML tags, better recover them in some variable and give them a listener in the desired event, also this is something very simple you do not need JQuery
Reference
document.addEventListener
Try the onchange event