获取等于选中的单选项目的值

Question

我无法让选中的无线电输入等于该值。相反，它似乎正在使用第一个列出的项目。我尝试将选中的值添加到不是最先出现的项目，但这没有用。有没有办法将 "checked" 添加到 getElement？

let curPage = 0;

let pronouns = document.getElementById("pronouns").value;
if (pronouns = "1") {
  pronoun1 = "he";
  pronoun2 = "his";
  pronoun3 = "he's";
} else if (pronouns = "2") {
  pronoun1 = "she";
  pronoun2 = "her";
  pronoun3 = "her's";
} else if (pronouns = "3") {
  pronoun1 = "they";
  pronoun2 = "theirs";
  pronoun3 = "they're";
}
let verb = document.getElementById("skill").value;
let place = document.getElementById("city").value;



function nextPage() {
  let page1 = `<p>In your hometown of ${place} you find that your world has turned upside down.</p> <p>"<span style="text-transform:capitalize;">${pronoun3}</span> over here!`;
  let page2 = `Div replacement content 2`;
  let page3 = `Div replacement content 3`;
  let showInfo = [page1, page2, page3];


  let story = document.getElementById('story');
  story.innerHTML = showInfo[curPage];
  if (curPage < 2) {
    curPage++;
  }
}

<div id="story">
 <form>
  <h2>Start Your Adventure!</h2>
  <h3>Who are you?</h3>

 
  <p>Pronouns: <br>

    <input type="radio" id="pronouns" name="pronouns" value="1" checked="">He/His<br>
    <input type="radio" id="pronouns" name="pronouns" value="2">She/Her<br>
    <input type="radio" id="pronouns" name="pronouns" value="3">They/Them<br></p>
  <p>Hometown:<br>
    <input type="radio" id="city" name="city" value="Portland" checked>Portland<br>
    <input type="radio" id="city" name="city" value="Vancouver">Vancouver<br></p>
  <p>Best Skill:<br>
    <input type="radio" id="skill" name="skill" value="swimming" checked>Swimming<br>
    <input type="radio" id="skill" name="skill" value="running">Running<br>
    <input type="radio" id="skill" name="skill" value="cooking">Cooking<br>
  </p>

</div>
<button onclick="nextPage()">Next</button>

Answer 1

我相信您想进行以下更改

使用名字而不是拥有多个相同的 ID，这是不允许的
全部放在click/function中，否则用户将无法更改值
您不需要表单标签

let curPage = 0;

window.addEventListener("load", function() {
  document.getElementById("getStory").addEventListener("click", function() {
    let pronouns = document.querySelector("[name=pronouns]:checked").value;
    if (pronouns = "1") {
      pronoun1 = "he";
      pronoun2 = "his";
      pronoun3 = "he's";
    } else if (pronouns = "2") {
      pronoun1 = "she";
      pronoun2 = "her";
      pronoun3 = "her's";
    } else if (pronouns = "3") {
      pronoun1 = "they";
      pronoun2 = "theirs";
      pronoun3 = "they're";
    }
    let verb = document.querySelector("[name=skill]:checked").value
    let place = document.querySelector("[name=city]:checked").value;

    let page1 = `<p>In your hometown of ${place} you find that your world has turned upside down.</p> <p>"<span style="text-transform:capitalize;">${pronoun3}</span> over here!`;
    let page2 = `Div replacement content 2`;
    let page3 = `Div replacement content 3`;
    let showInfo = [page1, page2, page3];

    let story = document.getElementById('story');
    story.innerHTML = showInfo[curPage];
    if (curPage < 2) {
      curPage++;
    }
  })
})

<div id="story">
  <h2>Start Your Adventure!</h2>
  <h3>Who are you?</h3>

  <p>Pronouns: <br>

    <input type="radio" name="pronouns" value="1" checked="">He/His<br>
    <input type="radio" name="pronouns" value="2">She/Her<br>
    <input type="radio" name="pronouns" value="3">They/Them<br></p>
  <p>Hometown:<br>
    <input type="radio" name="city" value="Portland" checked>Portland<br>
    <input type="radio" name="city" value="Vancouver">Vancouver<br></p>
  <p>Best Skill:<br>
    <input type="radio" name="skill" value="swimming" checked>Swimming<br>
    <input type="radio" name="skill" value="running">Running<br>
    <input type="radio" name="skill" value="cooking">Cooking<br>
  </p>
</div>

<button type="button" id="getStory">Next page</button>

获取等于选中的单选项目的值

Getting value to equal the checked radio item

javascript

html

input

radio-button

checked