0

имеется код:

 <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" и тоже самое с другим. Возможно ли это реализовать, если да, то была бы благодарна за подсказку как это сделать...

2
  • Женщина she, а мужик it... Ой, всё!))) 13 сен 2019 в 21:08
  • Хах, это я для примера женщину взяла, если что не обижайтесь сильно :D
    – user327919
    13 сен 2019 в 21:18

2 ответа 2

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>

0

Как дополнение к предыдущему ответу можно использовать объект для выбора артикля и шаблонные строки из 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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.