Как узнать какой input radio был выбран?

175

23 июля 2021, 19:10

имеется код:

 <body>
<input type="text" id="name" placeholder="your name and username here..." />
<input id="age" type="text" placeholder="your age here..." />
<input id="location" type="text" placeholder="your city here..." />
<input id="hobby" type="text" placeholder="what are your hobby?" /><br/>
<input type="radio" name="gender" value="male"/>man</br>
<input type="radio" name="gender"value="female"/>woman<br />
<button onclick="save()">Save inforation</button>

<script>
function save(name, age, city, hobby) {
name = document.getElementById("name").value;
age = document.getElementById("age").value;
city = document.getElementById("location").value;
hobby = document.getElementById("hobby").value
document.write(name +" is " + age + " years old. " +"it lives in " + city + " and it love " + hobby);
}</script>

Я хочу что бы при нажатии на кнопку "save" текст document.write а именно "it lives in" и "and it love" поменялись на женский или мужской род в зависимости от того, какой radio вы нажмете. Например если человек выбрал woman, текст с "it lives in" поменялся на "she lives in" и тоже самое с другим. Возможно ли это реализовать, если да, то была бы благодарна за подсказку как это сделать...

Answer 1

Одиночным тегам input, br не нужны /
С минимальным изменением вашего кода, так:

function save() { 
  let name = document.getElementById("name").value; 
  let age = document.getElementById("age").value; 
  let city = document.getElementById("location").value; 
  let hobby = document.getElementById("hobby").value; 
   
  let checked = document.querySelector('input[name="gender"]:checked'); 
  let bubu = "He"; // Если ничего не выбрали, querySelector вернет null. 
  // Условие не выполнится, но по дефолту там будет 'He', а не undefined 
  if( checked ){ bubu = checked.dataset.bubu; } 
   
  document.write(name + " is " + age + " years old. " + bubu + " lives in " + city + " and likes " + hobby); 
}

<input type="text" id="name" placeholder="your name and username here..." value="Alex"> 
<input id="age" type="text" placeholder="your age here..." value="10"> 
<input id="location" type="text" placeholder="your city here..." value="Madagaskar"> 
<input id="hobby" type="text" placeholder="what are your hobby?" value="to move it move it"><br> 
 
<input type="radio" name="gender" value="male" data-bubu="He">man<br> 
<input type="radio" name="gender" value="female" data-bubu="She">woman<br> 
 
<button onclick="save()">Save inforation</button>

Answer 2

Как дополнение к предыдущему ответу можно использовать объект для выбора артикля и шаблонные строки из es6.
В итоге получится как-то так:

function save() {
  const name = document.getElementById("name").value;
  const age = document.getElementById("age").value;
  const city = document.getElementById("location").value;
  const hobby = document.getElementById("hobby").value;
  const genderToArticle = {
    male: "he",
    female: "she"
  };
  const gender = document.querySelector('input[name="gender"]:checked');
  if (gender) {
    const article = genderToArticle[gender.value];
    document.write(
      `${name} is ${age} years old ${article} lives in ${city} and ${article} 
      loves ${hobby}`
    );
  }
}
document.getElementById("save_btn").addEventListener("click", save);

<button id="save_btn">Save inforation</button>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Как удалить только некоторые ошибки из console?

В веб-проекте встроен iframe, который тянет сторонние файлы с другого сайтаВ консоли возникает много ошибок, которые относятся к этому сайту

188

javascript

Нарисовать пустой двойной ромб

Подскажите пжл как нарисовать двойной пустой ромбСам ромб я реализовал, но не пойму как сделать его двойным

156

javascript

Как записать новое значение?

Как мне записывать новое значение переменной oB? Чтобы каждую секунду оно обновлялось

203

javascript

Как работает свойство left? [дубликат]

Как менять значение left с интервалом? Например left = -800px , нужно каждые три секунды увеличивать left на 260px , как правильно прописать свойство в js , у меня...

222