Родительский элемент не определен

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

Я нашел свойство, чтобы найти parent моего HTMLElement: element.parentElement

Однако я не могу выбрать элемент <p> с помощью radio.parentElement. Вот мой упрощенный код:

window.onload = Init;

function Init() {
  var formElement = document.forms.myform; //myform
  var radio = formElement.radioName;
  formElement.onsubmit = ProcessForm;
  var 
  isFormValid = () => {
    //validate if form is valid if not -> paint <p> red

    if (
        radio.value === null ||
        radio.value === ""
    ) {
      console.info(radio.parentElement); //(this is undefined. Why?)
      radio.parentElement.backgroundColor = "red"; //(this does not work because it is undefined)
      //Error:doubt.js:13 Uncaught TypeError: Cannot set properties of undefined (setting 'backgroundColor')
      return false;
    }
    return true;
  };

  function ProcessForm(event) {
    event.preventDefault();
    if (isFormValid()) {
      //do stuff
    } else {
      //do nothing
    }
  }
}

<!DOCTYPE html>
<html>
  <head>
      <script src = "./doubt.js"></script>
  </head>
  <body>
    <form name = "myform" action = "#" method = "POST">
      <p id = "caption_project">
        Project Selection
        <br />
        <input type = "radio" name = "radioName" id = "id1" value = "1" />
        <label for = "id1">1</label>
        <br />
        <input type = "radio" name = "radioName" id = "id2" value = "2" />
        <label for = "id2">2</label>
        <br />
  
      </p>
      <input id = "btnSubmit" type = "submit" />
    </form>
  </body>
</html>

Как выбрать элемент <p> без изменения HTML-документа?

javascript html

19.03.2022 02:10

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

У вас есть более одного радиовхода с именем radioName, поэтому formElement.radioName не является входом; это сбор входных данных. Вы можете получить n-й ввод, указав его индекс, например formElement.radioName[0].

var formElement = document.forms.myform; //myform
var radio = formElement.radioName;

// first radio
console.info(radio[0].parentElement);

 <form name = "myform" action = "#" method = "POST">
      <p id = "caption_project">
        Project Selection
        <br />
        <input type = "radio" name = "radioName" id = "id1" value = "1" />
        <label for = "id1">1</label>
        <br />
        <input type = "radio" name = "radioName" id = "id2" value = "2" />
        <label for = "id2">2</label>
        <br />
  
      </p>
      <input id = "btnSubmit" type = "submit" />
    </form>

Вы также можете просто запросить p через селектор запросов:

// query the document for the id:
console.info(document.querySelector('#caption_project'));

// or the first p under the form:
console.info(document.forms.myform.querySelector('p'));

 <form name = "myform" action = "#" method = "POST">
      <p id = "caption_project">
        Project Selection
        <br />
        <input type = "radio" name = "radioName" id = "id1" value = "1" />
        <label for = "id1">1</label>
        <br />
        <input type = "radio" name = "radioName" id = "id2" value = "2" />
        <label for = "id2">2</label>
        <br />
  
      </p>
      <input id = "btnSubmit" type = "submit" />
    </form>

19.03.2022 02:23

Другие вопросы по теме

Html загрузить фоновое изображение более низкого качества

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

Uncaught ReferenceError: useStudent не определен

Использование jinja2 между кавычками/настройка встроенных стилей с помощью jinja2

Панель навигации CSS (ссылка)

Как добавить тень для ввода и пользовательскую иконку с помощью css

Кнопка btn1_click не работает

Как отправить форму на Enter с помощью DIV

Как сделать так, чтобы 2 отдельных элемента div по очереди располагались вверху страницы?

Плавная прокрутка HTML+CSS не работает с идентификаторами и классами

Родительский элемент не определен

Ответы 1

Другие вопросы по теме

Похожие вопросы