Не получается получить value с тега input с типом type="radio"

Question

Не получается получить value с тега input с типом type="radio"

Рейтинг: 0Ответов: 1Опубликовано: 21.04.2023

Задача состоит в том что бы при нажатии на кнопку "результат" в новом окне "pop up" выводился текст который берётся с первого input, следующие input должны поменять цвет текста. Но когда выбираешь какой-либо цвет и нажимаешь на кнопку "результат" то в консоле выдаёт "undefined". (Получение value в конце функции).

let programming_language = document.getElementById('language_programming');
document.getElementById('open_pop_up').addEventListener('click', proglang);

function proglang() {
  let prlg = programming_language.options[programming_language.selectedIndex].value;
  const IMG = document.createElement('img');
  IMG.style.width = '200px';
  IMG.style.height = '200px';
  const CONTAINER = document.getElementById('img_programming_language');
  
  switch (prlg) {
    case 'JS':
      IMG.src = 'JavaScript.png';
      IMG.alt = 'JS';
      CONTAINER.append(IMG);
      break;
    
    case 'Python':
      IMG.src = 'Python.jpg';
      IMG.alt = 'Python';
      CONTAINER.append(IMG);
      break;
  
    case 'C++': 
      IMG.src = 'C++.png';
      IMG.alt = 'C++';
      CONTAINER.append(IMG);
      break;
      
    case 'C#': 
      IMG.src = 'C#.png';
      IMG.alt = 'C#';
      CONTAINER.append(IMG);
      break;
      
    case 'Java': 
      IMG.src = 'Java.png';
      IMG.alt = 'Java';
      CONTAINER.append(IMG);
      break;
  }
  
  let text = document.getElementById('text').value;
  let text_block = document.getElementById('text_output');
  text_block.innerHTML = text;
  
  let colortext = document.getElementsByName('color').value;
  console.log(colortext);
}

open_pop_up.onclick = function() {
  pop_up.classList.add('active');
};

pop_up_close.onclick = function() {
  pop_up.classList.remove('active');
  const CONTAINER = document.getElementById('img_programming_language');
  CONTAINER.innerHTML = '';
  let text_block = document.getElementById('text_output');
  text_block.innerHTML = '';
};

html {
  height: 100%;
  width: 100%;
}

.button{
  margin-top: 20px;
}

.button a {
  background-color: black;
  padding: 10px 20px;
  border-radius: 10px;
  color: white;
  text-decoration: none;
}

.pop_up {
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-color: transparent;
  position: fixed;
  z-index: 2;
  transform: translateY(-44.5%) scale(0%);
  transition: .4s ease-in-out;
}

.active {
  transform: translateY(0%) scale(100%);
  background-color: rgba(0, 0, 0, 80%);
}

.pop_up_conteiner {
  display: flex;
  width: 100%;
  height: 100%;
}

.pop_up_body {
  margin: auto;
  position: relative;
  background-color: white;
  border-radius: 10px;
  height: 500px;
  width: 500px;
  
}

#pop_up_close {
  text-align: center;
  position: absolute;
  top: 15px;
  right: 15px;
  font-size: 21px;
  cursor: pointer;
}

#img_programming_language{
  margin: 50px 0px 0px 50px;
}

.JS {
  background: url(JavaScript.png);
}

#text_output{
  margin: 50px 0px 0px 50px;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
  <form>
    <select name="language_programming" id="language_programming">
      <option disabled>Язык программирования</option>
      <option name="JavaScript" value="JS">JavaScript</option>
      <option name="Python" value="Python">Python</option>
      <option name="C++" value="C++">C++</option>
      <option name="C#" value="C#">C#</option>
      <option name="Java" value="Java">Java</option>
    </select>
  </form>
  <p><input name="text" id="text">
  <p>
    <form>
        <input type="radio" name="color" id="red" class="color_text" value="красный" cheked>
        <label for="red">красный</label><br>
        
        <input type="radio" name="color" id="green" class="color_text" value="зелёный">
        <label for="green">зелёный</label><br>
      
        <input type="radio" name="color" id="yellow" class="color_text" value="жёлтый">
        <label for="yellow">жёлтый</label><br>
      
        <input type="radio" name="color" id="purple" class="color_text" value="фиолетовый">
        <label for="purple">фиолетовый</label><br>
      
        <input type="radio" name="color" id="blue" class="color_text" value="синий">
        <label for="blue">синий</label><br>
    </form>
  <p>
  <div>
    <input type="checkbox">жирный<br>
    <input type="checkbox">курсив<br>
    <input type="checkbox">подчёркивание<br>
  </div>
  <div class="button">
    <a href="#" id="open_pop_up">результат</a>
  </div>
  <div class="pop_up" id="pop_up">
    <div class="pop_up_conteiner">
      <div class="pop_up_body">
        <div class="img_programming_language" id="img_programming_language"></div>
        <div id="text_output" ></div>
        <div id="pop_up_close">&#10006</div>
      </div>
    </div>
  </div>
  <script type="text/javascript" src="script.js"></script>
</body>

</html>

javascript html

Источник: Stack Overflow на русском

Answer 1

▲ 3Принят

В вашем случае обращение к document.getElementsByName('color').checked — неверное. Метод getElementsByName() вернет список-коллекцию NodeList. Используйте метод querySelector():

const element = document.querySelector('input[name="color"]:checked');
if (element) {
   console.log(element.value); // выведет, например, "красный"
} else {
   console.log('Цвет не выбран');
}

Не получается получить value с тега input с типом type=&quot;radio&quot;

Ответы

Не получается получить value с тега input с типом type="radio"