Saya punya formulir dengan 6 pertanyaan dan 4 tombol jawaban. Setiap tombol memiliki nilai numerik berbeda yang ingin saya simpulkan.

<form name="my-form" id="survey">
<div id="formpage_1" class="question" style="visibility: visible; display: block;">
    <h3>1. Question 1</h3>
    <button class="btn" value="-15" name="price1">Strongly Disagree</button>
    <button class="btn" value="-10" name="price1">Disagree</button>
    <button class="btn" value="0" name="price1">Agree</button>
    <button class="btn" value="0" name="price1">Strongly Agree</button>
    <br>
    <div class="change">
    <input type="button" value="Next" onclick="pagechange(1,2);">
    </div>
</div>

Bergantung pada jumlah itu, saya akan memasukkan beberapa teks berbeda ke dalam div.

const myForm = document.forms["my-form"],
toleR = document.getElementById("tolerance");

myForm.onsubmit = (e) => {
  e.preventDefault(); // disable form submit

  //Count the value of each answer
  let sum =
    Number(myForm.price1.value) +
    Number(myForm.price2.value) +
    Number(myForm.price3.value) +
    Number(myForm.price4.value) +
    Number(myForm.price5.value) +
    Number(myForm.price6.value);

  //insert image and text
  if (sum < 0)
    txt = '<div><p>Profile A</p></div>';
  if (sum < 12)
    txt = '<div><p>Profile B</p></div>';
  if (sum > 11)
    txt = '<div><p>Profile C</p></div>';
  if (sum > 17)
    txt = '<div><p>Profile D</p></div>';
  if (sum > 20)
    txt = '<div><p>Profile E</p></div>';

  myForm.totalSum.value = sum;

  toleR.innerHTML = txt;
};

Saya memiliki ini berfungsi ketika jawabannya adalah tombol radio, tetapi saya tidak dapat menata input radio semudah yang saya inginkan, jadi pindah ke tombol. Sekarang saya tidak yakin mengapa ini berhenti bekerja.

Poin Bonus: Setiap tombol dimaksudkan untuk tetap oranye saat diklik/"aktif". Tolong?

Contoh kerja: https://jsfiddle.net/bnedale/jp0k18wd/7/

Terima kasih

1
BigD 23 Desember 2020, 07:38

3 jawaban

Jawaban Terbaik

Silakan periksa kode di bawah ini. Saya telah menyebutkan perubahan dengan komentar. Change 1, Change 2 etc.

Silakan lihat querySelectorAll, getAttribute, closest jika Anda tidak terbiasa dengannya.

const myForm = document.forms["my-form"],
  toleR = document.getElementById("tolerance");

myForm.onsubmit = (e) => {
  e.preventDefault(); // disable form submit

  // Change 1
  // get selected buttons, button with active class inside myForm
  let activeBtn = myForm.querySelectorAll('.btn.active');

  //Count the value of each answer
  let sum = 0;
  for (var i = 0; i < activeBtn.length; i++) {
    // Change 2
    // in case of button you can not have .value to get value.
    // instead we can use button.getAttrinute("value") to get its value
    sum += Number(activeBtn[i].getAttribute("value"))
  }

  // Change 3
  // use if then else if for next conditions
  //insert image and text
  if (sum < 0)
    txt = '<div><p>Profile A</p></div>';
  else if (sum < 12)
    txt = '<div><p>Profile B</p></div>';
  else if (sum > 11)
    txt = '<div><p>Profile C</p></div>';
  else if (sum > 17)
    txt = '<div><p>Profile D</p></div>';
  else if (sum > 20)
    txt = '<div><p>Profile E</p></div>';

  myForm.totalSum.value = sum;

  toleR.innerHTML = txt;
};

//page change function
function pagechange(frompage, topage) {
  var page = document.getElementById("formpage_" + frompage);
  if (!page) return false;
  page.style.visibility = "hidden";
  page.style.display = "none";

  page = document.getElementById("formpage_" + topage);
  if (!page) return false;
  page.style.display = "block";
  page.style.visibility = "visible";

  return true;
}

//reset the form and scroll to top
document.getElementById("secondaryButton").onclick = function() {
  pagechange(7, 1);
  document.body.scrollTop = 0; // For Safari
  document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
};

//// Get the container element
//var btnContainer = document.getElementById("investments");

// Change 4
// Get all buttons with class="btn" inside the entire form
var btns = document.getElementsByClassName("btn");

// Loop through the buttons and add the active class to the current/clicked button
for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function() {
    // Change 5
    // get active button in current question div.
    // this.closest(.question) will find parent with class question for current element
    // then find button with active class
    var current = this.closest('.question').getElementsByClassName("active");
    // If there's no active class
    if (current.length > 0) {
      current[0].className = current[0].className.replace(" active", "");
    }

    // Add the active class to the current/clicked button
    this.className += " active";
  });
}
.btn {
  border: 2px solid #ea730b;
  border-radius: 5px;
  padding: 10px;
  width: 20%;
  display: inline;
  float: left;
  margin: 10px;
  background-color: white;
}

.active,
.btn:hover {
  color: white;
  background-color: #ea730b;
  border: 2px solid #ea730b;
}

#myDIV {
  width: 80%;
  margin: auto !important;
}

#reset {
  float: left;
  clear: both;
}

.change {
  display: block;
  clear: left;
  padding: 20px 0 0 0;
  width: 20%;
  height: auto;
  margin: auto;
}
<form name="my-form" id="survey">
  <div id="formpage_1" class="question" style="visibility: visible; display: block;">
    <h3>1. Question 1</h3>
    <button class="btn" value="-15" name="price1">Strongly Disagree</button>
    <button class="btn" value="-10" name="price1">Disagree</button>
    <button class="btn" value="0" name="price1">Agree</button>
    <button class="btn" value="0" name="price1">Strongly Agree</button>
    <br>
    <div class="change">
      <input type="button" value="Next" onclick="pagechange(1,2);">
    </div>

  </div>

  <div id="formpage_2" class="question" style="visibility: hidden; display: none;">
    <h3>2. Question 2 </h3>
    <button class="btn" value="1" name="price2">Strongly Disagree</button>
    <button class="btn" value="2" name="price2">Disagree</button>
    <button class="btn" value="3" name="price2">Agree</button>
    <button class="btn" value="5" name="price2">Strongly Agree</button>
    <br>
    <div class="change">
      <input type="button" value="Back" onclick="pagechange(2,1);">
      <p style="display: inline;">&nbsp&nbsp&nbsp</p>
      <input type="button" value="Next" onclick="pagechange(2,3);">
    </div>
  </div>

  <div id="formpage_3" class="question" style="visibility: hidden; display: none;">
    <h3>3. Question 3</h3>
    <button class="btn" value="5" name="price3">Strongly Disagree</button>
    <button class="btn" value="3" name="price3">Disagree</button>
    <button class="btn" value="2" name="price3">Agree</button>
    <button class="btn" value="1" name="price3">Strongly Agree</button>
    <br>
    <div class="change">
      <input type="button" value="Back" onclick="pagechange(3,2);">
      <p style="display: inline;">&nbsp&nbsp&nbsp</p>
      <input type="button" value="Next" onclick="pagechange(3,4);">
    </div>
  </div>

  <div id="formpage_4" class="question" style="visibility: hidden; display: none;">
    <h3>4. Question 4</h3>
    <button class="btn" value="5" name="price4">Strongly Disagree</button>
    <button class="btn" value="3" name="price4">Disagree</button>
    <button class="btn" value="2" name="price4">Agree</button>
    <button class="btn" value="1" name="price4">Strongly Agree</button>
    <br>
    <div class="change">
      <input type="button" value="Back" onclick="pagechange(4,3);">
      <p style="display: inline;">&nbsp&nbsp&nbsp</p>
      <input type="button" value="Next" onclick="pagechange(4,5);">
    </div>
  </div>

  <div id="formpage_5" class="question" style="visibility: hidden; display: none;">
    <h3>5. Question 5</h3>
    <button class="btn" value="1" name="price5">Strongly Disagree</button>
    <button class="btn" value="2" name="price5">Disagree</button>
    <button class="btn" value="3" name="price5">Agree</button>
    <button class="btn" value="5" name="price5">Strongly Agree</button>
    <br>
    <div class="change">
      <input type="button" value="Back" onclick="pagechange(5,4);">
      <p style="display: inline;">&nbsp&nbsp&nbsp</p>
      <input type="button" value="Next" onclick="pagechange(5,6);">
    </div>
  </div>

  <div id="formpage_6" class="question" style="visibility: hidden; display: none;">
    <h3>6. Question 6</h3>
    <button class="btn" value="5" name="price6">Strongly Disagree</button>
    <button class="btn" value="3" name="price6">Disagree</button>
    <button class="btn" value="2" name="price6">Agree</button>
    <button class="btn" value="1" name="price6">Strongly Agree</button>
    <br>
    <div class="change">
      <input type="button" value="Back" onclick="pagechange(6,5);">
      <p style="display: inline;">&nbsp&nbsp&nbsp</p>
      <button type="submit" onclick="pagechange(6,7)">Calculate</button>
    </div>
  </div>

  <div id="formpage_7" style="visibility: hidden; display: none;">
    <div id="tolerance"></div>
    <br>
    <br>
    <input id="secondaryButton" type="reset" value="Start again">
    <input type="text" name="totalSum" value="" size="2" readonly="readonly">
  </div>
</form>
1
Karan 23 Desember 2020, 05:48

Anda perlu mendeklarasikan tombol di dalam formulir dengan type="button", jika tidak, tombol ini akan berfungsi sebagai 'kirim' secara default

<button type="button" class="btn" value="-15" name="price1">Strongly Disagree</button>
      <button type="button" class="btn" value="-10" name="price1">Disagree</button>
      <button type="button" class="btn" value="0" name="price1">Agree</button>
      <button type="button" class="btn" value="0" name="price1">Strongly Agree</button>
0
sonEtLumiere 23 Desember 2020, 04:46

Anda memiliki beberapa kesalahan dalam kode Anda

  1. Semua tombol Anda memiliki nama yang sama price1 (harus berupa array atau namanya harus berbeda)
  2. Coba dapatkan nilai tombol dengan id
  3. Atur jenis tombol sebagai button(type="button")
function pagechange(elem1,elem2){

const myForm = document.forms["my-form"],
  toleR = document.getElementById("tolerance");

myForm.onsubmit = (e) => {
  e.preventDefault(); // disable form submit

  //Count the value of each answer
  let sum =
    Number(document.getElementById("price1").value) +
    Number(document.getElementById("price2").value) +
    Number(document.getElementById("price3").value) +
    Number(document.getElementById("price4").value);

  //insert image and text
  
  if (sum < 0)
    txt = '<div><p>Profile A</p></div>';
  if (sum < 12)
    txt = '<div><p>Profile B</p></div>';
  if (sum > 11)
    txt = '<div><p>Profile C</p></div>';
  if (sum > 17)
    txt = '<div><p>Profile D</p></div>';
  if (sum > 20)
    txt = '<div><p>Profile E</p></div>';
alert(sum);
  myForm.totalSum.value = sum;

  toleR.innerHTML = txt;
};
}
 <form name="my-form" id="survey">
    <div id="formpage_1" class="question" style="visibility: visible; display: block;">
      <h3>1. Question 1</h3>
      <button class="btn" type="button" value="-15" name="price1" id="price1">Strongly Disagree</button>
      <button class="btn" type="button" value="-10" name="price1" id="price2">Disagree</button>
      <button class="btn" type="button" value="0" name="price1" id="price3">Agree</button>
      <button class="btn" type="button" value="0" name="price1" id="price4">Strongly Agree</button>
      <br>
      <div class="change">
        <input type="submit" value="Next" onclick="pagechange(1,2);">
      </div>

    </div>
    </form>
0
Nads 23 Desember 2020, 05:25