文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >循环输入名称数组，并对选中的任何单选按钮的值进行求和。

问循环输入名称数组，并对选中的任何单选按钮的值进行求和。
EN

Stack Overflow用户
提问于 2022-05-20 21:40:11
回答 2查看 41关注 0票数 1

我需要循环遍历一个输入名称数组，并对选中的任何单选按钮的值进行求和。我可以让它输出单个组，但我很难处理多组值的回调。

我使用'document.querySelector('inputname="star1":checked').value‘来提取单个值并输出它。这很好，但是当我试图为另外4个组实现它时，我得到了一个又一个错误。

我决定将这些组的名称放入一个数组中，以便循环遍历所有5个组。我需要它忽略没有选中单选按钮的组，以避免任何空值错误。

编辑：@Zer00ne -我修改了我的代码片段以显示我的实际布局。

​

代码语言：javascript
复制
:root {
  --primary: #0162a4;
  --primary_med: #5084a7;
  --primary_dark: #113255;
  --light: #ffffff;
  --dark: #000000;
  --shadow: 2px 4px 8px rgba(104, 104, 104, 0.8);
  --shadow-white: 0px 11px 8px -10px rgba(255, 255, 255, 0.678), 0px -11px 8px -10px rgba(255, 255, 255, 0.678);
  --overlay: rgb(255, 255, 255, 0.15);
  --overlay-blk: rgba(0, 0, 0, 0.15);
  --gradient: linear-gradient(to bottom right, #113255, #0162a4);
}

@font-face {
  font-family: 'walkway';
  src: url('/static/fonts/Walkway_Bold-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'walkway';
  src: url('/static/fonts/Walkway_Black-webfont.woff') format('woff');
  font-weight: bold;
  font-style: normal;
}

.wrapper {
  max-width: 1058px;
  margin: auto;
  /*-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;*/
}

.feedback {
  box-sizing: border-box;
  padding-top: 10px;
  font-size: 12px;
  border-radius: 10px;
  background-image: var(--gradient);
  border: 1px solid #000000;
  box-shadow: 2px 4px 8px;
  gap: 10px;
  display: grid;
  grid-template-areas: 'feedMain';
  grid-template-columns: 513px;
  grid-template-rows: 375px;
  width: 534px;
}

.container {
  grid-area: feedMain;
}

.container {
  padding-left: 10px;
  width: 472px;
}

.tabs {
  position: relative;
  margin: 0;
}

.tabs::before,
.tabs::after {
  content: "";
  display: table;
}

.tabs::after {
  clear: both;
}

.tab {
  width: 110px;
  float: left;
  padding-right: 6px;
  Padding-top: 1px;
}

.tab-switch {
  display: none;
}

.tab-label {
  font-family: 'walkway';
  font-weight: bold;
  position: relative;
  display: block;
  height: 32px;
  text-align: center;
  background: var(--primary_dark);
  color: #fff;
  cursor: pointer;
  padding: 5px;
  font-size: 14px;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

.tab-switch:checked+.tab-label {
  color: var(--light);
  border-bottom: 0;
  z-index: 2;
  top: -0.0625rem;
  font-size: 16px;
  font-weight: 700;
}

.tab:first-child .tab-switch:checked+.tab-label {
  background-image: linear-gradient(to bottom right, rgb(59, 81, 110), rgb(62, 84, 117));
  border: 1px solid;
  border-bottom: 0px;
  border-color: #6386b6;
}

.tab:nth-child(2) .tab-switch:checked+.tab-label {
  background-image: linear-gradient(to bottom right, rgb(64, 91, 122), rgb(63, 88, 123));
  border: 1px solid;
  border-bottom: 0px;
  border-color: #6386b6;
}

.tab:nth-child(3) .tab-switch:checked+.tab-label {
  background-image: linear-gradient(to bottom right, rgb(61, 91, 127), rgb(64, 92, 128));
  border: 1px solid;
  border-bottom: 0px;
  border-color: #6386b6;
}

.tab:last-child .tab-switch:checked+.tab-label {
  background-image: linear-gradient(to bottom right, rgb(61, 94, 132), rgb(66, 96, 135));
  border: 1px solid;
  border-bottom: 0px;
  border-color: #6386b6;
}

.tab-switch:checked+.tab-label+.tab-content {
  z-index: 1;
  opacity: 1;
}

.tab:not(:first-child) .tab-switch:checked+.tab-label+.tab-content {
  border-top-left-radius: 8px;
}

.tab-content {
  height: 12rem;
  position: absolute;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  border-bottom-left-radius: 8px;
  border: 1px solid;
  border-color: #6386b6;
  z-index: 0;
  top: 31px;
  left: 0;
  background-image: linear-gradient(to bottom right, rgb(58, 82, 112), rgb(65, 117, 167));
  opacity: 0;
  height: 300px;
  width: 100%;
  padding: 20px;
  gap: 20px;
}

.rate-form {
  display: grid;
  gap: 20px;
  grid-template-areas: 'question-1 rating1' 'question-2 rating2' 'question-3 rating3' 'question-4 rating4' 'question-5 rating5';
  grid-template-columns: 305px 1fr;
  grid-template-rows: 44.6px 44.6px 44.6px 44.6px 44.6px;
}

.question-1 {
  grid-area: question-1;
}

.question-2 {
  grid-area: question-2;
}

.question-3 {
  grid-area: question-3;
}

.question-4 {
  grid-area: question-4;
}

.question-5 {
  grid-area: question-5;
}

.rating1 {
  grid-area: rating1;
}

.rating2 {
  grid-area: rating2;
}

.rating3 {
  grid-area: rating3;
}

.rating4 {
  grid-area: rating4;
}

.rating5 {
  grid-area: rating5;
}

.question-1,
.question-2,
.question-3,
.question-4,
.question-5 {
  background-color: rgb(255, 255, 255, 0.85);
  border-radius: 25px;
  border: 1px solid;
  border-color: rgb(0, 0, 0);
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'walkway';
  font-weight: bold;
  text-align: center;
}

.rating1,
.rating2,
.rating3,
.rating4,
.rating5 {
  justify-content: left;
  align-items: center;
  margin: 0;
  padding: 0;
  height: 44.6px;
  width: 140px;
}

.rating1 input,
.rating2 input,
.rating3 input,
.rating4 input,
.rating5 input {
  display: none;
}

.rating1 label,
.rating2 label,
.rating3 label,
.rating4 label,
.rating5 label {
  float: right;
  font-size: 30px;
  color: lightgrey;
  margin: 0 1px;
  text-shadow: 1px 1px #bbb;
}

.rating1 label:before,
.rating2 label:before,
.rating3 label:before,
.rating4 label:before,
.rating5 label:before {
  content: '★';
}

.rating1 input:checked~label,
.rating2 input:checked~label,
.rating3 input:checked~label,
.rating4 input:checked~label,
.rating5 input:checked~label {
  color: #de4323;
  text-shadow: 1px 1px #2e2e2e;
}

.score-submit {
  display: flex;
  background: var(--primary_dark);
  align-items: center;
  width: 518px;
  height: 70px;
  padding: 8px;
}

.send-button {
  font-family: 'walkway';
  font-weight: bold;
  background-color: var(--light);
  border: 1px solid;
  border-color: #000;
  color: #000;
  padding: 12px 15px;
  font-size: 20px;
  font-weight: 700;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 8px;
}

.time {
  font-family: 'walkway';
  position: relative;
  color: var(--light);
  align-items: center;
  padding-left: 10px;
  padding-top: 10px;
  width: 310px;
  height: 50px;
  text-align: center;
}

.remain,
.countdown {
  align-items: center;
  vertical-align: middle;
  padding: 0;
  margin: 0;
  font-size: 20px;
  height: 20px;
}

.countdown {
  padding-top: 5px;
}

.star-score {
  margin: 0;
  padding-right: 10;
  text-align: left;
}

.star-text {
  font-size: 30px;
  font-family: 'walkway';
  font-weight: bold;
  color: rgb(255, 255, 255);
}
代码语言：javascript
复制
<div class="feedback">
  <div class="container">
    <div class="tabs">
      <div class="tab">
        <input type="radio" name="css-tabs" id="tab-1" checked class="tab-switch">
        <label for="tab-1" class="tab-label">Tab1</label>
        <div class="tab-content">
          <form class="rate-form" type="text">
            <div class="question-1">
              <h4>Question 1</h4>
            </div>
            <div class="question-2">
              <h4>Question 2</h4>
            </div>
            <div class="question-3">
              <h4>Question 3</h4>
            </div>
            <div class="question-4">
              <h4>Question 4</h4>
            </div>
            <div class="question-5">
              <h4>Question 5</h4>
            </div>
            <div class="rating1">
              <input type="radio" name="star1" id="rad-5" value="5"><label for="rad-5">
                                            </label>
              <input type="radio" name="star1" id="rad-4" value="4"><label for="rad-4">
                                            </label>
              <input type="radio" name="star1" id="rad-3" value="3"><label for="rad-3">
                                            </label>
              <input type="radio" name="star1" id="rad-2" value="2"><label for="rad-2">
                                            </label>
              <input type="radio" name="star1" id="rad-1" value="1"><label for="rad-1">
                                            </label>
            </div>
            <div class="rating2">
              <input type="radio" name="star2" id="rad-6" value="5"><label for="rad-6">
                                            </label>
              <input type="radio" name="star2" id="rad-7" value="4"><label for="rad-7">
                                            </label>
              <input type="radio" name="star2" id="rad-8" value="3"><label for="rad-8">
                                            </label>
              <input type="radio" name="star2" id="rad-9" value="2"><label for="rad-9">
                                            </label>
              <input type="radio" name="star2" id="rad-10" value="1"><label for="rad-10">
                                            </label>
            </div>
            <div class="rating3">
              <input type="radio" name="star3" id="rad-11" value="5"><label for="rad-11">
                                            </label>
              <input type="radio" name="star3" id="rad-12" value="4"><label for="rad-12">
                                            </label>
              <input type="radio" name="star3" id="rad-13" value="3"><label for="rad-13">
                                            </label>
              <input type="radio" name="star3" id="rad-14" value="2"><label for="rad-14">
                                            </label>
              <input type="radio" name="star3" id="rad-15" value="1"><label for="rad-15">
                                            </label>
            </div>
            <div class="rating4">
              <input type="radio" name="star4" id="rad-16" value="5"><label for="rad-16">
                                            </label>
              <input type="radio" name="star4" id="rad-17" value="4"><label for="rad-17">
                                            </label>
              <input type="radio" name="star4" id="rad-18" value="3"><label for="rad-18">
                                            </label>
              <input type="radio" name="star4" id="rad-19" value="2"><label for="rad-19">
                                            </label>
              <input type="radio" name="star4" id="rad-20" value="1"><label for="rad-20">
                                            </label>
            </div>
            <div class="rating5">
              <input type="radio" name="star5" id="rad-21" value="5"><label for="rad-21">
                                            </label>
              <input type="radio" name="star5" id="rad-22" value="4"><label for="rad-22">
                                            </label>
              <input type="radio" name="star5" id="rad-23" value="3"><label for="rad-23">
                                            </label>
              <input type="radio" name="star5" id="rad-24" value="2"><label for="rad-24">
                                            </label>
              <input type="radio" name="star5" id="rad-25" value="1"><label for="rad-25">
                                            </label>
            </div>
          </form>
        </div>
      </div>
      <div class="tab">
        <input type="radio" name="css-tabs" id="tab-2" class="tab-switch">
        <label for="tab-2" class="tab-label">Tab2</label>
        <div class="tab-content"> </div>
      </div>
      <div class="tab">
        <input type="radio" name="css-tabs" id="tab-3" class="tab-switch">
        <label for="tab-3" class="tab-label">Tab3</label>
        <div class="tab-content"> </div>
      </div>
      <div class="tab">
        <input type="radio" name="css-tabs" id="tab-4" class="tab-switch">
        <label for="tab-4" class="tab-label">Tab4</label>
        <div class="tab-content"> </div>
      </div>
    </div>
  </div>
  <div class="score-submit">
    <button class="send-button" onclick="submit()">Send it</button>
    <div class="time">
      <p class="remain">Time Remaining</p>
      <p class="countdown">00:00</p>
    </div>
    <div class="star-score">
      <p class="star-text" id="star-text">0/25</p>
    </div>
  </div>
</div>

​

javascript
html
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2022-05-21 03:43:08

更新

采用示例B是很简单的，

  • JavaScript与示例A相同。
  • 将id="rankings"添加到<form>中，就像在示例A中那样
  • 将<p>更改为<output>，如示例A中所示
  • 唯一不同的是分配<output> form="ratings"，因为它不在<form>中。

HTMLFormElement和HTMLFormControlsCollection接口用于引用<form>和表单控件。

代码语言：javascript
复制
// Reference a <form> with id (or name) "ratings"
const ratings = document.forms.ratings;
/*
Reference a form control inside of <form> with the id/name of "total". Assign it's value
as two spaces.
*/
ratings.total.value = "\u00A0\u00A0";

不要使用内联事件处理程序使用onevent属性或事件侦听器，以下是onevent属性：

代码语言：javascript
复制
/*
Bind "input" event to <form> invoke scoreCount(e) when "input" event is 
triggered on or within <form>. If any radio button is clicked, scoreCount(e) 
runs. A single line for an unlimited number of form controls. Don't waste your
time typing: onclick="scoreCount(value, name)" 25 times.
*/
ratings.oninput = scoreCount;

事件可以从一个标记冒泡到它的父标记，等等，从而使这成为可能。通过监听带有祖先标记的事件并在事件处理程序中排除和包含标记，间接控制许多标记称为事件委托。下面是一个事件处理程序：

代码语言：javascript
复制
/*
All event handlers pass the Event Object by default. It isn't being used this
time. Instead, "this" is being used which points to the tag bound to the event
which is <form>. 
*/
function scoreCount(e) {
  // Reference all form controls within <form>
  const IO = this.elements;
  let score = 
    /*
    NodeList of all .checked tags within <form> converted into an array. The
    output will be coerced into a string (''+)
    */  
    '' + [...this.querySelectorAll(':checked')]
    /*
    On each iteration get the .checked tag's value and coerce it into a (+)
    number. Add that number to the accumulator (sum) (initial value is 0.
    */
    .reduce(
      (sum, chk) => sum + (+chk.value), 0);
    /*
    Take the output from the previous process and display it in <output>. The
    .padStart() keeps a space before the value so there isn't any shifting.
    */
    IO.total.value = score.padStart(2, "\u00A0");
  }

例A

​

代码语言：javascript
复制
<!DOCTYPE html>
<html lang="en">

<head>
  <title></title>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <style>
    html {
      font: 300 2ch/1.25 'Segoe UI'
    }
    
    ol {
      padding-left: 20px;
    }
    
    li {
      margin-top: 8px;
    }
    
    li::marker {
      font-size: 1.1rem;
    }
    
    p {
      margin-bottom: 8px;
      font-size: 1.1rem;
    }
    
    fieldset {
      display: flex;
      justify-content: space-evenly;
      align-items: center;
    }
    
    fieldset label:first-of-type {
      order: 5
    }
    
    fieldset label:nth-of-type(2) {
      order: 4
    }
    
    fieldset label:nth-of-type(3) {
      order: 3
    }
    
    fieldset label:nth-of-type(4) {
      order: 2
    }
    
    fieldset label:last-of-type {
      order: 1
    }
    
    label {
      display: inline-block;
      font-size: 2rem;
      text-shadow: -1px -1px 1px rgba(255, 255, 255, .1), 
                   1px 1px 1px rgba(0, 0, 0, .5), 
                   2px -9px 2px rgba(221, 231, 255, 0);
      color: #d9d9d9;
      transition: 0.7s;
      cursor: pointer;
    }
    
    input {
      display: none;
    }
    
    input:checked~label {
      text-shadow: 2px 1px 0px #7A7A7A;
      color: #FFF900;
      transition: 0.7s
    }
    
    #total {
      display: block;
      font-family: Consolas;
      font-size: 1.25rem;
    }
    
    #total::before {
      content: 'Rating: ';
      font-family: 'Segoe UI';
    }
    
    #total::after {
      content: '/25'
    }
  </style>
</head>

<body>
  <form id='ratings'>
    <ol>
      <li>
        <p>Question 1</p>
        <fieldset name="rating">
          <input id="rad-5" name="star1" type="radio" value="5">
          <label for="rad-5">★</label>
          <input id="rad-4" name="star1" type="radio" value="4">
          <label for="rad-4">★</label>
          <input id="rad-3" name="star1" type="radio" value="3">
          <label for="rad-3">★</label>
          <input id="rad-2" name="star1" type="radio" value="2">
          <label for="rad-2">★</label>
          <input id="rad-1" name="star1" type="radio" value="1">
          <label for="rad-1">★</label>
        </fieldset>
      </li>
      <li>
        <p>Question 2</p>
        <fieldset name="rating">
          <input id="rad-10" name="star2" type="radio" value="5">
          <label for="rad-10">★</label>
          <input id="rad-9" name="star2" type="radio" value="4">
          <label for="rad-9">★</label>
          <input id="rad-8" name="star2" type="radio" value="3">
          <label for="rad-8">★</label>
          <input id="rad-7" name="star2" type="radio" value="2">
          <label for="rad-7">★</label>
          <input id="rad-6" name="star2" type="radio" value="1">
          <label for="rad-6">★</label>
        </fieldset>
      </li>
      <li>
        <p>Question 3</p>
        <fieldset name="rating">
          <input id="rad-15" name="star3" type="radio" value="5">
          <label for="rad-15">★</label>
          <input id="rad-14" name="star3" type="radio" value="4">
          <label for="rad-14">★</label>
          <input id="rad-13" name="star3" type="radio" value="3">
          <label for="rad-13">★</label>
          <input id="rad-12" name="star3" type="radio" value="2">
          <label for="rad-12">★</label>
          <input id="rad-11" name="star3" type="radio" value="1">
          <label for="rad-11">★</label>
        </fieldset>
      </li>
      <li>
        <p>Question 4</p>
        <fieldset name="rating">
          <input id="rad-20" name="star4" type="radio" value="5">
          <label for="rad-20">★</label>
          <input id="rad-19" name="star4" type="radio" value="4">
          <label for="rad-19">★</label>
          <input id="rad-18" name="star4" type="radio" value="3">
          <label for="rad-18">★</label>
          <input id="rad-17" name="star4" type="radio" value="2">
          <label for="rad-17">★</label>
          <input id="rad-16" name="star4" type="radio" value="1">
          <label for="rad-16">★</label>
        </fieldset>
        <li>
          <p>Question 5</p>
          <fieldset name="rating">
            <input id="rad-25" name="star5" type="radio" value="5">
            <label for="rad-25">★</label>
            <input id="rad-24" name="star5" type="radio" value="4">
            <label for="rad-24">★</label>
            <input id="rad-23" name="star5" type="radio" value="3">
            <label for="rad-23">★</label>
            <input id="rad-22" name="star5" type="radio" value="2">
            <label for="rad-22">★</label>
            <input id="rad-21" name="star5" type="radio" value="1">
            <label for="rad-21">★</label>
          </fieldset>
        </li>
    </ol>
    <fieldset>
      <output id='total'></output>
    </fieldset>
  </form>
  <script>
    const ratings = document.forms.ratings;
    ratings.oninput = scoreCount;
    ratings.total.value = "\u00A0\u00A0";

    function scoreCount(e) {
      const IO = this.elements;
      let score = 
        '' + [...this.querySelectorAll(':checked')]
        .reduce(
          (sum, chk) => sum + (+chk.value), 0);
      IO.total.value = score.padStart(2, "\u00A0");
    }
  </script>
</body>

</html>

​

例B

​

代码语言：javascript
复制
const ratings = document.forms.ratings;
ratings.oninput = scoreCount;
ratings.total.value = "\u00A0\u00A0";

function scoreCount(e) {
  const IO = this.elements;
  let score =
    '' + [...this.querySelectorAll(':checked')]
    .reduce(
      (sum, chk) => sum + (+chk.value), 0);
  IO.total.value = score.padStart(2, "\u00A0");
}
代码语言：javascript
复制
:root {
  --primary: #0162a4;
  --primary_med: #5084a7;
  --primary_dark: #113255;
  --light: #ffffff;
  --dark: #000000;
  --shadow: 2px 4px 8px rgba(104, 104, 104, 0.8);
  --shadow-white: 0px 11px 8px -10px rgba(255, 255, 255, 0.678), 0px -11px 8px -10px rgba(255, 255, 255, 0.678);
  --overlay: rgb(255, 255, 255, 0.15);
  --overlay-blk: rgba(0, 0, 0, 0.15);
  --gradient: linear-gradient(to bottom right, #113255, #0162a4);
}

@font-face {
  font-family: 'walkway';
  src: url('/static/fonts/Walkway_Bold-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'walkway';
  src: url('/static/fonts/Walkway_Black-webfont.woff') format('woff');
  font-weight: bold;
  font-style: normal;
}

.wrapper {
  max-width: 1058px;
  margin: auto;
  /*-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;*/
}

.feedback {
  box-sizing: border-box;
  padding-top: 10px;
  font-size: 12px;
  border-radius: 10px;
  background-image: var(--gradient);
  border: 1px solid #000000;
  box-shadow: 2px 4px 8px;
  gap: 10px;
  display: grid;
  grid-template-areas: 'feedMain';
  grid-template-columns: 513px;
  grid-template-rows: 375px;
  width: 534px;
}

.container {
  grid-area: feedMain;
}

.container {
  padding-left: 10px;
  width: 472px;
}

.tabs {
  position: relative;
  margin: 0;
}

.tabs::before,
.tabs::after {
  content: "";
  display: table;
}

.tabs::after {
  clear: both;
}

.tab {
  width: 110px;
  float: left;
  padding-right: 6px;
  Padding-top: 1px;
}

.tab-switch {
  display: none;
}

.tab-label {
  font-family: 'walkway';
  font-weight: bold;
  position: relative;
  display: block;
  height: 32px;
  text-align: center;
  background: var(--primary_dark);
  color: #fff;
  cursor: pointer;
  padding: 5px;
  font-size: 14px;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

.tab-switch:checked+.tab-label {
  color: var(--light);
  border-bottom: 0;
  z-index: 2;
  top: -0.0625rem;
  font-size: 16px;
  font-weight: 700;
}

.tab:first-child .tab-switch:checked+.tab-label {
  background-image: linear-gradient(to bottom right, rgb(59, 81, 110), rgb(62, 84, 117));
  border: 1px solid;
  border-bottom: 0px;
  border-color: #6386b6;
}

.tab:nth-child(2) .tab-switch:checked+.tab-label {
  background-image: linear-gradient(to bottom right, rgb(64, 91, 122), rgb(63, 88, 123));
  border: 1px solid;
  border-bottom: 0px;
  border-color: #6386b6;
}

.tab:nth-child(3) .tab-switch:checked+.tab-label {
  background-image: linear-gradient(to bottom right, rgb(61, 91, 127), rgb(64, 92, 128));
  border: 1px solid;
  border-bottom: 0px;
  border-color: #6386b6;
}

.tab:last-child .tab-switch:checked+.tab-label {
  background-image: linear-gradient(to bottom right, rgb(61, 94, 132), rgb(66, 96, 135));
  border: 1px solid;
  border-bottom: 0px;
  border-color: #6386b6;
}

.tab-switch:checked+.tab-label+.tab-content {
  z-index: 1;
  opacity: 1;
}

.tab:not(:first-child) .tab-switch:checked+.tab-label+.tab-content {
  border-top-left-radius: 8px;
}

.tab-content {
  height: 12rem;
  position: absolute;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  border-bottom-left-radius: 8px;
  border: 1px solid;
  border-color: #6386b6;
  z-index: 0;
  top: 31px;
  left: 0;
  background-image: linear-gradient(to bottom right, rgb(58, 82, 112), rgb(65, 117, 167));
  opacity: 0;
  height: 300px;
  width: 100%;
  padding: 20px;
  gap: 20px;
}

.rate-form {
  display: grid;
  gap: 20px;
  grid-template-areas: 'question-1 rating1' 'question-2 rating2' 'question-3 rating3' 'question-4 rating4' 'question-5 rating5';
  grid-template-columns: 305px 1fr;
  grid-template-rows: 44.6px 44.6px 44.6px 44.6px 44.6px;
}

.question-1 {
  grid-area: question-1;
}

.question-2 {
  grid-area: question-2;
}

.question-3 {
  grid-area: question-3;
}

.question-4 {
  grid-area: question-4;
}

.question-5 {
  grid-area: question-5;
}

.rating1 {
  grid-area: rating1;
}

.rating2 {
  grid-area: rating2;
}

.rating3 {
  grid-area: rating3;
}

.rating4 {
  grid-area: rating4;
}

.rating5 {
  grid-area: rating5;
}

.question-1,
.question-2,
.question-3,
.question-4,
.question-5 {
  background-color: rgb(255, 255, 255, 0.85);
  border-radius: 25px;
  border: 1px solid;
  border-color: rgb(0, 0, 0);
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'walkway';
  font-weight: bold;
  text-align: center;
}

.rating1,
.rating2,
.rating3,
.rating4,
.rating5 {
  justify-content: left;
  align-items: center;
  margin: 0;
  padding: 0;
  height: 44.6px;
  width: 140px;
}

.rating1 input,
.rating2 input,
.rating3 input,
.rating4 input,
.rating5 input {
  display: none;
}

.rating1 label,
.rating2 label,
.rating3 label,
.rating4 label,
.rating5 label {
  float: right;
  font-size: 30px;
  color: lightgrey;
  margin: 0 1px;
  text-shadow: 1px 1px #bbb;
}

.rating1 label:before,
.rating2 label:before,
.rating3 label:before,
.rating4 label:before,
.rating5 label:before {
  content: '★';
}

.rating1 input:checked~label,
.rating2 input:checked~label,
.rating3 input:checked~label,
.rating4 input:checked~label,
.rating5 input:checked~label {
  color: #de4323;
  text-shadow: 1px 1px #2e2e2e;
}

.score-submit {
  display: flex;
  background: var(--primary_dark);
  align-items: center;
  width: 518px;
  height: 70px;
  padding: 8px;
}

.send-button {
  font-family: 'walkway';
  font-weight: bold;
  background-color: var(--light);
  border: 1px solid;
  border-color: #000;
  color: #000;
  padding: 12px 15px;
  font-size: 20px;
  font-weight: 700;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 8px;
}

.time {
  font-family: 'walkway';
  position: relative;
  color: var(--light);
  align-items: center;
  padding-left: 10px;
  padding-top: 10px;
  width: 310px;
  height: 50px;
  text-align: center;
}

.remain,
.countdown {
  align-items: center;
  vertical-align: middle;
  padding: 0;
  margin: 0;
  font-size: 20px;
  height: 20px;
}

.countdown {
  padding-top: 5px;
}

.star-score {
  margin: 0;
  padding-right: 10;
  text-align: left;
}

.star-text {
  font-size: 30px;
  font-family: 'walkway';
  font-weight: bold;
  color: rgb(255, 255, 255);
}

#total::after {content: '/25'}
代码语言：javascript
复制
<div class="feedback">
  <div class="container">
    <div class="tabs">
      <div class="tab">
        <input type="radio" name="css-tabs" id="tab-1" checked class="tab-switch">
        <label for="tab-1" class="tab-label">Tab1</label>
        <div class="tab-content">
          <form id='ratings' class="rate-form">
            <div class="question-1">
              <h4>Question 1</h4>
            </div>
            <div class="question-2">
              <h4>Question 2</h4>
            </div>
            <div class="question-3">
              <h4>Question 3</h4>
            </div>
            <div class="question-4">
              <h4>Question 4</h4>
            </div>
            <div class="question-5">
              <h4>Question 5</h4>
            </div>
            <div class="rating1">
              <input type="radio" name="star1" id="rad-5" value="5"><label for="rad-5">
                                            </label>
              <input type="radio" name="star1" id="rad-4" value="4"><label for="rad-4">
                                            </label>
              <input type="radio" name="star1" id="rad-3" value="3"><label for="rad-3">
                                            </label>
              <input type="radio" name="star1" id="rad-2" value="2"><label for="rad-2">
                                            </label>
              <input type="radio" name="star1" id="rad-1" value="1"><label for="rad-1">
                                            </label>
            </div>
            <div class="rating2">
              <input type="radio" name="star2" id="rad-6" value="5"><label for="rad-6">
                                            </label>
              <input type="radio" name="star2" id="rad-7" value="4"><label for="rad-7">
                                            </label>
              <input type="radio" name="star2" id="rad-8" value="3"><label for="rad-8">
                                            </label>
              <input type="radio" name="star2" id="rad-9" value="2"><label for="rad-9">
                                            </label>
              <input type="radio" name="star2" id="rad-10" value="1"><label for="rad-10">
                                            </label>
            </div>
            <div class="rating3">
              <input type="radio" name="star3" id="rad-11" value="5"><label for="rad-11">
                                            </label>
              <input type="radio" name="star3" id="rad-12" value="4"><label for="rad-12">
                                            </label>
              <input type="radio" name="star3" id="rad-13" value="3"><label for="rad-13">
                                            </label>
              <input type="radio" name="star3" id="rad-14" value="2"><label for="rad-14">
                                            </label>
              <input type="radio" name="star3" id="rad-15" value="1"><label for="rad-15">
                                            </label>
            </div>
            <div class="rating4">
              <input type="radio" name="star4" id="rad-16" value="5"><label for="rad-16">
                                            </label>
              <input type="radio" name="star4" id="rad-17" value="4"><label for="rad-17">
                                            </label>
              <input type="radio" name="star4" id="rad-18" value="3"><label for="rad-18">
                                            </label>
              <input type="radio" name="star4" id="rad-19" value="2"><label for="rad-19">
                                            </label>
              <input type="radio" name="star4" id="rad-20" value="1"><label for="rad-20">
                                            </label>
            </div>
            <div class="rating5">
              <input type="radio" name="star5" id="rad-21" value="5"><label for="rad-21">
                                            </label>
              <input type="radio" name="star5" id="rad-22" value="4"><label for="rad-22">
                                            </label>
              <input type="radio" name="star5" id="rad-23" value="3"><label for="rad-23">
                                            </label>
              <input type="radio" name="star5" id="rad-24" value="2"><label for="rad-24">
                                            </label>
              <input type="radio" name="star5" id="rad-25" value="1"><label for="rad-25">
                                            </label>
            </div>
          </form>
        </div>
      </div>
      <div class="tab">
        <input type="radio" name="css-tabs" id="tab-2" class="tab-switch">
        <label for="tab-2" class="tab-label">Tab2</label>
        <div class="tab-content"> </div>
      </div>
      <div class="tab">
        <input type="radio" name="css-tabs" id="tab-3" class="tab-switch">
        <label for="tab-3" class="tab-label">Tab3</label>
        <div class="tab-content"> </div>
      </div>
      <div class="tab">
        <input type="radio" name="css-tabs" id="tab-4" class="tab-switch">
        <label for="tab-4" class="tab-label">Tab4</label>
        <div class="tab-content"> </div>
      </div>
    </div>
  </div>
  <div class="score-submit">
    <button class="send-button" onclick="submit()">Send it</button>
    <div class="time">
      <p class="remain">Time Remaining</p>
      <p class="countdown">00:00</p>
    </div>
    <div class="star-score">
      <output class="star-text" id="total" form='ratings'></output>
    </div>
  </div>
</div>

​

票数 1
EN

Stack Overflow用户

发布于 2022-05-20 22:43:42

您所使用的循环出现错误的原因是，每当您单击一个按钮时，它都会尝试获取所有按钮的值(此时尚未单击这些按钮)。

要做到这一点，一个更简单的方法是传递onclick事件中按钮的值。我在html中添加了这个。我还传递了这个名字，以确保每个问题只有1分。

代码语言：javascript
复制
<form class="rate-form" type="text">
    <div class="question-1">
      <h4>Question 1</h4>
    </div>
    <div class="question-2">
      <h4>Question 2</h4>
    </div>
    <div class="question-3">
      <h4>Question 3</h4>
    </div>
    <div class="question-4">
      <h4>Question 4</h4>
    </div>
    <div class="question-5">
      <h4>Question 5</h4>
    </div>
    <div class="rating1">
      <input type="radio" name="star1" id="rad-5" value="5" onclick="scoreCount(value, name)"><label for="rad-5">
                                              </label>
      <input type="radio" name="star1" id="rad-4" value="4" onclick="scoreCount(value, name)"><label for="rad-4">
                                              </label>
      <input type="radio" name="star1" id="rad-3" value="3" onclick="scoreCount(value, name)"><label for="rad-3">
                                              </label>
      <input type="radio" name="star1" id="rad-2" value="2" onclick="scoreCount(value, name)"><label for="rad-2">
                                              </label>
      <input type="radio" name="star1" id="rad-1" value="1" onclick="scoreCount(value, name)"><label for="rad-1">
                                              </label>
    </div>
    <div class="rating2">
      <input type="radio" name="star2" id="rad-6" value="5" onclick="scoreCount(value, name)"><label for="rad-6">
                                              </label>
      <input type="radio" name="star2" id="rad-7" value="4" onclick="scoreCount(value, name)"><label for="rad-7">
                                              </label>
      <input type="radio" name="star2" id="rad-8" value="3" onclick="scoreCount(value, name)"><label for="rad-8">
                                              </label>
      <input type="radio" name="star2" id="rad-9" value="2" onclick="scoreCount(value, name)"><label for="rad-9">
                                              </label>
      <input type="radio" name="star2" id="rad-10" value="1" onclick="scoreCount(value, name)"><label for="rad-10">
                                              </label>
    </div>
    <div class="rating3">
      <input type="radio" name="star3" id="rad-11" value="5" onclick="scoreCount(value, name)"><label for="rad-11">
                                              </label>
      <input type="radio" name="star3" id="rad-12" value="4" onclick="scoreCount(value, name)"><label for="rad-12">
                                              </label>
      <input type="radio" name="star3" id="rad-13" value="3" onclick="scoreCount(value, name)"><label for="rad-13">
                                              </label>
      <input type="radio" name="star3" id="rad-14" value="2" onclick="scoreCount(value, name)"><label for="rad-14">
                                              </label>
      <input type="radio" name="star3" id="rad-15" value="1" onclick="scoreCount(value, name)"><label for="rad-15">
                                              </label>
    </div>
    <div class="rating4">
      <input type="radio" name="star4" id="rad-16" value="5" onclick="scoreCount(value, name)"><label for="rad-16">
                                              </label>
      <input type="radio" name="star4" id="rad-17" value="4" onclick="scoreCount(value, name)"><label for="rad-17">
                                              </label>
      <input type="radio" name="star4" id="rad-18" value="3" onclick="scoreCount(value, name)"><label for="rad-18">
                                              </label>
      <input type="radio" name="star4" id="rad-19" value="2" onclick="scoreCount(value, name)"><label for="rad-19">
                                              </label>
      <input type="radio" name="star4" id="rad-20" value="1" onclick="scoreCount(value, name)"><label for="rad-20">
                                              </label>
    </div>
    <div class="rating5">
      <input type="radio" name="star5" id="rad-21" value="5" onclick="scoreCount(value, name)"><label for="rad-21">
                                              </label>
      <input type="radio" name="star5" id="rad-22" value="4" onclick="scoreCount(value, name)"><label for="rad-22">
                                              </label>
      <input type="radio" name="star5" id="rad-23" value="3" onclick="scoreCount(value, name)"><label for="rad-23">
                                              </label>
      <input type="radio" name="star5" id="rad-24" value="2" onclick="scoreCount(value, name)"><label for="rad-24">
                                              </label>
      <input type="radio" name="star5" id="rad-25" value="1" onclick="scoreCount(value, name)"><label for="rad-25">
                                              </label>
    </div>
</form>

您的Javascript应该如下所示：

代码语言：javascript
复制
var total_score;
var dict = {};
function scoreCount(value, name) {
  dict[name] = parseInt(value);
  total_score = 0;
  for (var score of Object.values(dict)){
        total_score += score;
  }
}

每次你现在点击一个按钮，它将添加一对，或取代它，如果它已经存在，并重新计算的总分数根据新的迪克。

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/72325023

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档