Javascript 脚本适用于 HTML 页面，但不适用于单独的.js 文件

Question

I'm building a simple Registration page and am validating some inputs with a .js external file. The thing is that most of the code works but a small part of it doesn't. As you can see I change the status of some fields using document.getElementById(id).disabled = false , for instance. The code is the same for ids MP1, MP2, and MP3. When the procedure calls the script it seems that the MP3 id is not recognized. The weird part is that if I copy the script onto the main page, alongside the HTML form, and stop using the external file everything works. Does anyone have a clue on how to fix that? I'd like to use an external file instead of writing the script on the main page.

The script below enables all the required fields as expected except for the MP3 id field. It only works when the code is on the body of the main file.

 function validarForm() { var optionCheckBox1 = document.getElementById("check-blenda"); if (optionCheckBox1.checked) { document.getElementById("MP3").disabled = false; document.getElementById("perc-mp1").disabled = false; document.getElementById("MP2").disabled = false; document.getElementById("perc-mp2").disabled = false; } else { document.getElementById("perc-mp1").disabled = true; document.getElementById("perc-mp1").value = ""; document.getElementById("MP2").disabled = true; document.getElementById("perc-mp2").disabled = true; document.getElementById("perc-mp2").value = ""; document.getElementById("MP2").value = ""; } }

 <h2>Cadastro de Produtos</h2> <form method="post"> <div class="row"> <div class="col-md-1 mt-3 align-self-center d-flex justify-content-start"> <label for="tipo" class="form-label">Tipo:</label> </div> <div class="col-md-2 mt-3"> <select class="form-select" aria-label="tipo" name="tipo" id="tipo"> <option value="">Selecione o tipo</option> <option value="1">Bobina</option> <option value="2">Saco</option> <option value="3">Folha Cortada</option> </select> </div> <div class="col-md-1 mt-3 align-self-center d-flex justify-content-start"> <label for="config" class="form-label">Configuração:</label> </div> <div class="col-md-3 mt-3"> <select class="form-select" aria-label="config" name="config" id="config"> <option value="">Selecione a Configuração</option> <option value="1"></option> <option value="2">Tubular</option> <option value="3">Folha Simples</option> <option value="4">Folha Dupla</option> <option value="5">Ref. 1 Lado</option> <option value="6">Bolha</option> <option value="7">Gofrada</option> </select> </div> <div class="mt-3 col-md-auto align-self-center d-flex justify-content-start"> <label for="MP" class="form-label">Matéria Prima:</label> </div> <div class="col-md-2 mt-3 align-self-center d-flex justify-content-start"> <select class="form-select" aria-label="MP" name="MP" id="MP"> <option value="">Selecione a MP</option> <option value="1">Reciclado Canela</option> <option value="2">Reciclado Preto</option> <option value="3">Reciclado Colorido</option> <option value="4">Reciclado Cristal</option> <option value="5">PEBD Virgem</option> <option value="6">PEAD Virgem</option> </select> </div> <div class="col-md-1 mt-3 form-check"> <input class="form-check-input" type="checkbox" value="" id="check-blenda" onchange="validarForm()"> <label class="form-check-label d-flex justify-content-center" for="check-blenda">Blenda</label> </div> </div> <div class="row"> <div class="mt-3 col-md-1 align-self-center"> <label for="perc-mp1" class="form-label">% MP 1:</label> </div> <div class="mt-3 col-md-1"> <input type="text" class="form-control" aria-label="perc-mp1" name="perc-mp1" id="perc-mp1" disabled> </div> <div class="mt-3 col-md-auto align-self-center d-flex justify-content-start"> <label for="MP2" class="form-label">Matéria Prima 2:</label> </div> <div class="col-md-2 mt-3 align-self-center d-flex justify-content-start"> <select class="form-select" aria-label="MP2" name="MP2" id="MP2" disabled> <option value="">Selecione a MP</option> <option value="1">Reciclado Canela</option> <option value="2">Reciclado Preto</option> <option value="3">Reciclado Colorido</option> <option value="4">Reciclado Cristal</option> <option value="5">PEBD Virgem</option> <option value="6">PEAD Virgem</option> </select> </div> <div class="mt-3 col-md-1 align-self-center d-flex justify-content-end"> <label for="perc-mp2" class="form-label">% MP 2:</label> </div> <div class="mt-3 col-md-1"> <input type="text" class="form-control" aria-label="perc-mp2" name="perc-mp2" id="perc-mp2" disabled> </div> <div class="mt-3 col-md-auto align-self-center d-flex justify-content-start"> <label for="MP3" class="form-label">Matéria Prima 3:</label> </div> <div class="col-md-2 mt-3 align-self-center d-flex justify-content-start"> <select class="form-select" aria-label="MP3" name="MP3" id="MP3" disabled> <option value="">Selecione a MP</option> <option value="1">Reciclado Canela</option> <option value="2">Reciclado Preto</option> <option value="3">Reciclado Colorido</option> <option value="4">Reciclado Cristal</option> <option value="5">PEBD Virgem</option> <option value="6">PEAD Virgem</option> </select> </div> <div class="mt-3 col-md-1 align-self-center d-flex justify-content-end"> <label for="perc-mp3" class="form-label">% MP 3:</label> </div> <div class="mt-3 col-md-1"> <input type="text" class="form-control" aria-label="perc-mp3" name="perc-mp3" id="perc-mp3" disabled> </div> </div> <div class="mt-4 col-md-auto align-self-center d-flex justify-content-start"> <button type="button" class="btn btn-primary" onclick="validarblendas()">Cadastrar</button> </div> </form>

Answer 1

You is declaring a function, but you never run it, also if yow code will work with the Dom you need to wait after the Dom renders to run it

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



  var optionCheckBox1 = document.getElementById("check-blenda");


  if (optionCheckBox1.checked) {
    document.getElementById("MP3").disabled = false;
    document.getElementById("perc-mp1").disabled = false;
    document.getElementById("MP2").disabled = false;
    document.getElementById("perc-mp2").disabled = false;


  } else {
    document.getElementById("perc-mp1").disabled = true;
    document.getElementById("perc-mp1").value = "";
    document.getElementById("MP2").disabled = true;
    document.getElementById("perc-mp2").disabled = true;
    document.getElementById("perc-mp2").value = "";
    document.getElementById("MP2").value = "";


  }

})