javascript - 如何返回跨度元素的评分？

Question

我正在尝试制作一个交互式评级组件。我不知道如何在选择评级后在 span 元素上返回结果。

当我在按钮上输入评分时:

提交评分后:

那里我要返回结果。

我尝试在 forEach 函数中使用 if 语句，但不知道如何在 span 元素上返回结果。

const allBtns = document.querySelectorAll('.btn');


allBtns.forEach(btn => {
  btn.addEventListener('click', function onClick() {
    btn.style.backgroundColor = 'orange';
  })
});

function ShowAndHide() {

  let y = document.querySelector('.ratingbox');
  let x = document.querySelector('.thankyou');
  if (x.style.display == 'none') {
    y.style.display = 'none';
    x.style.display = 'block';


  } else {
    x.style.display = 'none';
  }

}

<div class="ratingbox">
  <div class="backgroundstar">
    <img src="images/icon-star.svg" alt="" class="star">
  </div>

  <div class="writing">
    <h1>How did we do?</h1>

    <p>Please let us know how we did with your support request. All feedback is appreciated to help us improve our offering! </p>
  </div>

  <div class="flexbox">
    <ul>
      <li><button class="btn"><p id="num">1</p></button></li>
      <li><button class="btn"><p id="num">2</p></button></li>
      <li><button class="btn"><p id="num">3</p></button></li>
      <li><button class="btn"><p id="num">4</p></button></li>
      <li><button class="btn"><p id="num">5</p></button></li>
    </ul>

    <button class="submit" onclick="ShowAndHide()">SUBMIT</button>
  </div>
</div>

<div class="thankyou " style="display: none; ">
  <div class="message ">
    <img src="https://via.placeholder.com/50" alt=" " class="img ">
    
    <div class="selected ">
      <span id="rating "></span>
    </div>
    
    <div class="greeting ">
      <h2>Thank you!</h2>
      
      <p id="appreciate ">We appreciate you taking the thime to give a rating.<br> If you ever need more support, don't hesitate to <br> get in touch!
      </p>
    </div>
  </div>
</div>

Answer 1

为工作使用正确的工具。

使用单选按钮来管理您的评分并根据您的喜好设置标签样式。然后使用 CSS 来处理隐藏和显示。将 JavaScript 留给操纵 DOM。

请记住，ID需要是唯一的。一旦它们不再是唯一的，它们就不再是 id。如果 ID 不是唯一的，document.getElementById 之类的东西将会中断。

/*Get out radio buttons based on the name attribue*/
const allBtns = document.querySelectorAll('[name=rating]');


/*Add the event listener*/
allBtns.forEach(btn => {    
  btn.addEventListener('click', function onClick() {     
   /*Update the text using the value of the radio button*/
   document.querySelector("#rating").innerHTML = `Thanks for rating us ${this.value}!`;
  })
});

function ShowAndHide() {
  /*Toggle the hide class on the appropriate boxes*/
  document.querySelector('.ratingbox').classList.toggle("hide");
  document.querySelector('.thankyou').classList.toggle("hide");;  
}

/*Hide the radion buttons*/
.flexbox input {display:none;}

/*Give some buttonish styling to the check boxes */
.flexbox label {
  display:block;
  border: 1px blue solid;
  border-radius: 50%;
  font-size: 1.2em;
  font-weight:bold;
  text-align:center;
  line-height:30px;
  height: 30px;
  width:30px;
  margin-bottom: 1em;
}

/*Change the styling of the checked label*/
/*Note the use of the adjacent sibling cominator + */
.flexbox :checked + label  {
  background-color: orange;
}

/*Generic class to handle showing and hiding*/
.hide {
  display:none;
}

<div class="ratingbox">
  <div class="backgroundstar">
    <img src="images/icon-star.svg" alt="" class="star">
  </div>

  <div class="writing">
    <h1>How did we do?</h1>

    <p>Please let us know how we did with your support request. All feedback is appreciated to help us improve our offering! </p>
  </div>

  <div class="flexbox">
    <ul>
      <!-- Using radio buttons , that will be hidden with associated labels -->
      <li><input type="radio" name="rating" id="rtr1" value="1"><label for="rtr1">1</label></li>
      <li><input type="radio" name="rating" id="rtr2" value="2"><label for="rtr2">2</label></li>
      <li><input type="radio" name="rating" id="rtr3" value="3"><label for="rtr3">3</label></li>
      <li><input type="radio" name="rating" id="rtr4" value="4"><label for="rtr4">4</label></li>
      <li><input type="radio" name="rating" id="rtr5" value="5"><label for="rtr5">5</label></li>
    </ul>

    <button class="submit" onclick="ShowAndHide()">SUBMIT</button>
  </div>
</div>

<div class="thankyou hide">
  <div class="message ">
    <img src="https://via.placeholder.com/50" alt=" " class="img ">
    
    <div class="selected ">
      <span id="rating"></span>
    </div>
    
    <div class="greeting ">
      <h2>Thank you!</h2>
      
      <p id="appreciate ">We appreciate you taking the thime to give a rating.<br> If you ever need more support, don't hesitate to <br> get in touch!
      </p>
    </div>
  </div>
</div>