Is giving javascript conflict

Question

I am trying to create a command by copying what I type into an input in the other, but when there is more than one record it does not perform the function in the first input. Below comes the code:

<td>id<input name="id" id="id" type="number" value="1" /></td>
<td>temporada<input name="temporada" id="temporada" type="number" value="1" /></td>
<td>episodio<input name="episodio" id="episodio" type="number" value="2" /></td><br/>
<td>teste<input name="teste" id="teste" type="text" style="width:1000px;" /></td><br/>
<td>url<input name="url" id="url" type="url" value="http://google.com"/></td>

<script>
    window.oninput = function(event){
        var campo = event.target.id; // pega o id do campo que chamou o evento
        
        if(campo == "episodio"){
            document.querySelector('#teste').value = '{"temporada":"'+ document.querySelector('#temporada').value +'","episodio":"'+ document.querySelector('#episodio').value +'","link":"'+ document.querySelector('#url').value +'"}';
        } else if(campo == "temporada"){
            document.querySelector('#teste').value = '{"temporada":"'+ document.querySelector('#temporada').value +'","episodio":"'+ document.querySelector('#episodio').value +'","link":"'+ document.querySelector('#url').value +'"}';
        } else if(campo == "url") {
            document.querySelector('#teste').value = '{"temporada":"'+ document.querySelector('#temporada').value +'","episodio":"'+ document.querySelector('#episodio').value +'","link":"'+ document.querySelector('#url').value +'"}';
        }
    };
</script>




<td>id<input name="id1" id="id1" type="number" value="2" /></td>
<td>temporada<input name="temporada1" id="temporada1" type="number" value="1" /></td>
<td>episodio<input name="episodio1" id="episodio1" type="number" value="2" /></td><br/>
<td>teste<input name="teste1" id="teste1" type="text" style="width:1000px;" /></td><br/>
<td>url<input name="url1" id="url1" type="url" value="http://google.com"/></td>

<script>
    window.oninput = function(event){
        var campo1 = event.target.id; // pega o id do campo que chamou o evento
        
        if(campo1 == "episodio1"){
            document.querySelector('#teste1').value = '{"temporada":"'+ document.querySelector('#temporada1').value +'","episodio":"'+ document.querySelector('#episodio1').value +'","link":"'+ document.querySelector('#url1').value +'"}';
        } else if(campo1 == "temporada"){
            document.querySelector('#teste1').value = '{"temporada":"'+ document.querySelector('#temporada1').value +'","episodio":"'+ document.querySelector('#episodio1').value +'","link":"'+ document.querySelector('#url1').value +'"}';
        } else if(campo1 == "url") {
            document.querySelector('#teste1').value = '{"temporada":"'+ document.querySelector('#temporada1').value +'","episodio":"'+ document.querySelector('#episodio1').value +'","link":"'+ document.querySelector('#url1').value +'"}';
        }
    };
</script>

how can I correct this conflict?

Answer 1

Turns out you’re wearing one Globalevent of window Object, and you associate it with one function and soon after the changes to another. Then logically it will only execute the value that is in it which is the last.

In order to deal with Inputs you must mecher in the event associated with it with Event handlers. And should have used another selector to group what you wanted to modify with querySelector..
I suggest you study the HTML and CSS database better and then start manipulating them with Javascript