Возвращается ошибка, так как файл JS ищет главную функцию во всех HTML-файлах

ProgramBox

Возвращается ошибка, так как файл JS ищет главную функцию во всех HTML-файлах

Post author:admin
Запись опубликована:24 января, 2022
Post category:Вопросы по программированию

#javascript #html #css #forms

Вопрос:

Я собираюсь сохранить это простым:

1 Файл JS
3 HTML-файла (с именами: Автомобили, Деревья, Дом)
1 Файлы CSS.

Все функции помещаются в файл JS. Но проблема в том, что если я нажму на кнопку «Отправить» в автомобилях, файл JS начнется с функции (дерева) вверху и будет искать addEventListener, если он не сможет его найти, он вернется с ошибкой «Не удается прочитать свойство «addEventListener» null » — проблема в том, что:

 tree_form.addEventListener('submit', e => {

Я просто хочу, чтобы файл Js выполнял функцию, о которой его просит HTML-файл.
Так что в данном случае это функции «Автомобиля», которые следуют за функциями дерева.

Если я разделю все и помещу это в отдельные проекты или добавлю JS со ссылочным HTML-файлом, все будет работать нормально, проблема возникает только тогда, когда я помещаю все функции в один файл JS.

HTML Автомобили

 <!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;500amp;display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <title>Car Form</title>
</head>

<body>
 <div class="cars-body">
   <div class="car_container">
     <div class="car_heading_form">
       <h2> Car Form</h2>
     </div>
     <form id="car_form" class="car_form">
       <div class="car-form-control">
         <label for="carName">Car Name</label>
         <input type="text" placeholder="hank" id="carName" />
         <i class="fas fa-check-circle"></i>
         <i class="fas fa-exclamation-circle"></i>
         <small>Error message</small>
       </div>
       <div class="car-form-control">
         <label for="carColor">Car Color</label>
         <input type="text" placeholder="Gold" id="carColor" />
         <i class="fas fa-check-circle"></i>
         <i class="fas fa-exclamation-circle"></i>
         <small>Error message</small>
       </div>
       <button>Submit</button>
     </form>
   </div>
 </div>
</body>

<script src="script.js"></script>


</html>

 // Tree Form
const tree_form = document.getElementById('tree_form');
const treeName = document.getElementById('treeName');
const treeHeight = document.getElementById('treeHeight');

tree_form.addEventListener('submit', e => {
    e.preventDefault();

    tree_Inputs();
});

function tree_Inputs() {
    //trim to remove the whitespaces
    const treerNameValue = treeName.value.trim();
    const treeHeightValue = treeHeight.value.trim();

    if (treeNameValue === '') {
        setErrorForTree(treeName, 'Please enter a name');
    } else {
        setSuccessForTree(treeName);
    }

    if (treeHeightValue === '') {
        setErrorForTree(treeHeight, 'Please enter a number.');
    } else {
        setSuccessForTree(treeHeight);
    }
}

function setErrorForTree(input, message) {
    const formControlTree = input.parentElement;
    const small = formControlTree.querySelector('small');
    formControlTree.className = 'tree-form-control error';
    small.innerText = message;
}

function setSuccessForTree(input) {
    const formControlTree = input.parentElement;
    formControlCar.className = 'tree-form-control success';
}



// Car Form
const car_form = document.getElementById('car_form');
const carName = document.getElementById('carName');
const carColor = document.getElementById('carColor');

car_form.addEventListener('submit', e => {
    e.preventDefault();

    car_Inputs();
});

function car_Inputs() {
    //trim to remove the whitespaces
    const carNameValue = carName.value.trim();
    const carColorValue = carColor.value.trim();

    if (carNameValue === '') {
        setErrorForCar(carName, 'Please enter a name');
    } else {
        setSuccessForCar(carName);
    }

    if (carColorValue === '') {
        setErrorForCar(carColor, 'Please a color.');
    } else {
        setSuccessForCar(carColor);
    }
}

function setErrorForCar(input, message) {
    const formControlCar = input.parentElement;
    const small = formControlCar.querySelector('small');
    formControlCar.className = 'car-form-control error';
    small.innerText = message;
}

function setSuccessForCar(input) {
    const formControlCar = input.parentElement;
    formControlCar.className = 'car-form-control success';
}

CSS

   /***** CONTACT US PAGE CSS *****/

  * {
      box-sizing: border-box;
  }

  .car-body, tree-body {
      min-height: 1300px;
      width: 100%;
      background-color: blue;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      margin: 0px;
  }

  .car_container, .tree_container {
      background-color: #fff;
      border-radius: 5px;
      box-shadow: 0 2px 5px rgb(0 0 0 / 30%);
      overflow: hidden;
      width: 600px;
      max-width: 100%;
  }

  .car_heading_form,   .tree_heading_form {
      border-bottom: 1px solid #f0f0f0;
      background-color: #f7f7f7;
      padding: 20px 40px;
  }

.car_heading_form h2  {
   margin: 0px;
      color: Blue;
} 

.tree_heading_form h2 {
      margin: 0px;
      color: green;
  }

  .car_form, .tree_form {
      padding: 30px 40px;
  }

  .car-form-control, .tree-form-control  {
      margin-bottom: 10px;
      padding-bottom: 20px;
      position: relative;
  }

  .car-form-control label, .tree-form-control label {
      display: inline-block;
      margin-bottom: 5px;
      font-weight: 530;
      font-size: 17px;
  }

  .car-form-control input, .tree-form-control input {
      border: 2px solid #f0f0f0;
      border-radius: 4px;
      display: block;
      font-size: 14px;
      padding: 10px;
      width: 100%;
  }

  .car-form-control input:focus, .tree-form-control input:focus {
      outline: 0;
      border-color: #777;
  }

  .car-form-control.success input, .tree-form-control.success input {
      border-color: green;
  }

  .car-form-control.error input,   .tree-form-control.error input {
      border-color: red;
  }


  .car-form-control i,   .tree-form-control i {
      visibility: hidden;
      position: absolute;
      top: 40px;
      right: 10px;
  }

  .car-form-control.success i.fa-check-circle,   .tree-form-control.success i.fa-check-circle {
      color: green;
      visibility: visible;
  }

  .car-form-control.error i.fa-exclamation-circle,   .tree-form-control.error i.fa-exclamation-circle {
      color: red;
      visibility: visible;
  }

  .car-form-control small, .tree-form-control small {
      color: red;
      position: absolute;
      bottom: 0;
      left: 0;
      visibility: hidden;
  }

  .car-form-control.error small, .tree-form-control.error small {
      visibility: visible;
  }

  .car_form button {
      background-color: rgb(31, 136, 229);
      border: 2px solid rgb(128, 128, 128, 0.199);
      border-radius: 4px;
      color: #fff;
      display: block;
      font-size: 16px;
      padding: 10px;
      margin-top: 20px;
      width: 50%;
      cursor: pointer;
  }

  .car_form button:hover {
      cursor: pointer;
      box-shadow: 1px 1px 1px rgb(25, 60, 173);
  }

Ответ №1:

Есть два способа решить эту проблему.

Я бы предпочел создать пространство имен в JS, если есть много вещей, которые мне нужно добавить только в один JS.
var yourNamespace = {
```
  Car: function() {
 },

 Tree: function() {
 },
 House: function() { 
 }
 
```
};

и в последнем вызове, yourNamespace.Car() когда вы нажмете «Отправить».

Это рабочий сценарий:

     var yourNamespace = {};
yourNamespace = {

    Tree: function() {
const tree_form = document.getElementById('tree_form');
const treeName = document.getElementById('treeName');
const treeHeight = document.getElementById('treeHeight');

tree_form.addEventListener('submit', e => {
    e.preventDefault();

    tree_Inputs();
});

function tree_Inputs() {
    //trim to remove the whitespaces
    const treerNameValue = treeName.value.trim();
    const treeHeightValue = treeHeight.value.trim();

    if (treeNameValue === '') {
        setErrorForTree(treeName, 'Please enter a name');
    } else {
        setSuccessForTree(treeName);
    }

    if (treeHeightValue === '') {
        setErrorForTree(treeHeight, 'Please enter a number.');
    } else {
        setSuccessForTree(treeHeight);
    }
}

function setErrorForTree(input, message) {
    const formControlTree = input.parentElement;
    const small = formControlTree.querySelector('small');
    formControlTree.className = 'tree-form-control error';
    small.innerText = message;
}

function setSuccessForTree(input) {
    const formControlTree = input.parentElement;
    formControlCar.className = 'tree-form-control success';
}

    },

    Car: function() {
const car_form = document.getElementById('car_form');
const carName = document.getElementById('carName');
const carColor = document.getElementById('carColor');

car_form.addEventListener('submit', e => {
    e.preventDefault();

    car_Inputs();
});

function car_Inputs() {
    //trim to remove the whitespaces
    const carNameValue = carName.value.trim();
    const carColorValue = carColor.value.trim();

    if (carNameValue === '') {
        setErrorForCar(carName, 'Please enter a name');
    } else {
        setSuccessForCar(carName);
    }

    if (carColorValue === '') {
        setErrorForCar(carColor, 'Please a color.');
    } else {
        setSuccessForCar(carColor);
    }
}

function setErrorForCar(input, message) {
    const formControlCar = input.parentElement;
    const small = formControlCar.querySelector('small');
    formControlCar.className = 'car-form-control error';
    small.innerText = message;
}

function setSuccessForCar(input) {
    const formControlCar = input.parentElement;
    formControlCar.className = 'car-form-control success';
}
    },
    House: function() { 
    }

};

 * {
      box-sizing: border-box;
  }

  .car-body, tree-body {
      min-height: 1300px;
      width: 100%;
      background-color: blue;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      margin: 0px;
  }

  .car_container, .tree_container {
      background-color: #fff;
      border-radius: 5px;
      box-shadow: 0 2px 5px rgb(0 0 0 / 30%);
      overflow: hidden;
      width: 600px;
      max-width: 100%;
  }

  .car_heading_form,   .tree_heading_form {
      border-bottom: 1px solid #f0f0f0;
      background-color: #f7f7f7;
      padding: 20px 40px;
  }

.car_heading_form h2  {
   margin: 0px;
      color: Blue;
} 

.tree_heading_form h2 {
      margin: 0px;
      color: green;
  }

  .car_form, .tree_form {
      padding: 30px 40px;
  }

  .car-form-control, .tree-form-control  {
      margin-bottom: 10px;
      padding-bottom: 20px;
      position: relative;
  }

  .car-form-control label, .tree-form-control label {
      display: inline-block;
      margin-bottom: 5px;
      font-weight: 530;
      font-size: 17px;
  }

  .car-form-control input, .tree-form-control input {
      border: 2px solid #f0f0f0;
      border-radius: 4px;
      display: block;
      font-size: 14px;
      padding: 10px;
      width: 100%;
  }

  .car-form-control input:focus, .tree-form-control input:focus {
      outline: 0;
      border-color: #777;
  }

  .car-form-control.success input, .tree-form-control.success input {
      border-color: green;
  }

  .car-form-control.error input,   .tree-form-control.error input {
      border-color: red;
  }


  .car-form-control i,   .tree-form-control i {
      visibility: hidden;
      position: absolute;
      top: 40px;
      right: 10px;
  }

  .car-form-control.success i.fa-check-circle,   .tree-form-control.success i.fa-check-circle {
      color: green;
      visibility: visible;
  }

  .car-form-control.error i.fa-exclamation-circle,   .tree-form-control.error i.fa-exclamation-circle {
      color: red;
      visibility: visible;
  }

  .car-form-control small, .tree-form-control small {
      color: red;
      position: absolute;
      bottom: 0;
      left: 0;
      visibility: hidden;
  }

  .car-form-control.error small, .tree-form-control.error small {
      visibility: visible;
  }

  .car_form button {
      background-color: rgb(31, 136, 229);
      border: 2px solid rgb(128, 128, 128, 0.199);
      border-radius: 4px;
      color: #fff;
      display: block;
      font-size: 16px;
      padding: 10px;
      margin-top: 20px;
      width: 50%;
      cursor: pointer;
  }

  .car_form button:hover {
      cursor: pointer;
      box-shadow: 1px 1px 1px rgb(25, 60, 173);
  }

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;500amp;display=swap" rel="stylesheet">
   
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <div class="cars-body">
   <div class="car_container">
     <div class="car_heading_form">
       <h2> Car Form</h2>
     </div>
     <form id="car_form" class="car_form">
       <div class="car-form-control">
         <label for="carName">Car Name</label>
         <input type="text" placeholder="hank" id="carName" />
         <i class="fas fa-check-circle"></i>
         <i class="fas fa-exclamation-circle"></i>
         <small>Error message</small>
       </div>
       <div class="car-form-control">
         <label for="carColor">Car Color</label>
         <input type="text" placeholder="Gold" id="carColor" />
         <i class="fas fa-check-circle"></i>
         <i class="fas fa-exclamation-circle"></i>
         <small>Error message</small>
       </div>
       <button onClick="yourNamespace.Car()">Submit</button>
     </form>
   </div>
   </div>

проверьте по идентификатору, какая форма в данный момент видна (не предпочтительно в вашей ситуации, лучше использовать функции, предоставляемые JS)

1. Я думаю, что это будет лучший вариант, так как у меня есть другие вещи, которые нужно вызывать помимо форм, поэтому я мог бы назначить их все в пространство имен

2. Меня смущает одна вещь. Ваша первая инструкция «var youNamespace{ функция автомобиля() и т. Д….» Находится в верхней части файла JS? Затем, следуя этому, вы бы написали ‘ var yourNamespace = {}; yourNamespace = {

3. за ним следует автомобиль: функция() { Дерево: функция() { const tree_form = document.getElementById(‘форма дерева’); имя дерева const = document.getElementById(‘Имя дерева’); высота дерева const = document.getElementById(‘Высота дерева’); форма дерева.addEventListener(‘отправить’, e => { e.preventDefault(); tree_Inputs(); });

4. Я не понял твоего вопроса. но главное, укажите yourNamespace = {}; в 1-й строке. Это объявление, тогда все функции в вашем пространстве имен будут такими, какие они есть. так что, если вы замените свой js на этот, он будет работать. если вы правильно отформатируете свой код, вы узнаете, как он выглядит (yourNamespace.Car / yourNamespace. Дерево/ Пространство ваших имен. Дом)

5. 1-я строка я объявляю ‘var yourNamspace = { Автомобиль: функция(), Дерево: функция(), функция дома()’ 2-я строка я перехожу прямо в ‘ yourNamespace { Дерево: функция() { const tree_form = document.getElementById(‘форма дерева’); const treeName = document.getElementById(‘Имя дерева’); const treeHeight = document.getElementById(‘Высота дерева’);…. и т. Д….. Мне не нужно поместите «var yourNamespace = {};» между 1-й и 2-й строками (как указано выше), чтобы снова объявить ваше имя? -надеюсь, в этом больше смысла

Ответ №2:

Похоже, вы ожидаете, что JavaScript волшебным образом узнает, в какой форме он находится и какой код нужно запустить. Извините. JavaScript — это не магия.

Попробуйте что-нибудь вроде

 const tree_form = document.getElementById('tree_form');
const car_form = document.getElementById('car_form');

if (tree_form) {
  // all the tree code
}
else if (car_form) {
  // all the car code
}

Ответ №3:

Если вы нажмете кнопку отправить во второй раз без значения в другом поле ввода, то сообщение должно отображаться правильно. Это javascript для автомобиля без вашего css.

 // Car Form
const car_form = document.getElementById('car_form');
const carName  = document.getElementById('carName');
const carColor = document.getElementById('carColor');

car_form.addEventListener('submit', e => {
    e.preventDefault();
    car_Inputs();
});

function car_Inputs() {
    //trim to remove the whitespaces
    const carNameValue  = carName.value.trim();
    const carColorValue = carColor.value.trim();
    
    setErrorForCar(carName, 'Message');
    if (carNameValue === '') {
        setErrorForCar(carName, 'Please enter a name');
    } else {
        setSuccessForCar(carName);
    }

    setErrorForCar(carColor, 'Message');
    if (carColorValue === '') {
        setErrorForCar(carColor, 'Please enter a color.');
    } else {
        setSuccessForCar(carColor);
    }
}

function setErrorForCar(input, message) {
    const formControlCar = input.parentElement;
    const small = formControlCar.querySelector('small');
    formControlCar.className = 'car-form-control error';
    small.innerText = message;
}

function setSuccessForCar(input) {
    const formControlCar = input.parentElement;
    formControlCar.className = 'car-form-control success';
}

 <div class="cars-body">
   <div class="car_container">
     <div class="car_heading_form">
       <h2> Car Form</h2>
     </div>
     <form id="car_form" class="car_form">
       <div class="car-form-control">
         <label for="carName">Car Name</label>
         <input type="text" placeholder="hank" id="carName" />
         <i class="fas fa-check-circle"></i>
         <i class="fas fa-exclamation-circle"></i>
         <small>Message</small>
       </div>
       <div class="car-form-control">
         <label for="carColor">Car Color</label>
         <input type="text" placeholder="Gold" id="carColor" />
         <i class="fas fa-check-circle"></i>
         <i class="fas fa-exclamation-circle"></i>
         <small>Message</small>
       </div>
       <button>Submit</button>
     </form>
   </div>
 </div>

Метки: Возвращается ошибка, так как файл JS ищет главную функцию во всех HTML-файлах