送信後にjavascriptで星付きのフォームをクリーンアップするにはどうすればよいですか？

debugcn 投稿 Dev

ウラディスラフ

星とstar_borderの2つのアイコンを持つ星のある単純なフォームがあります（starはマークされたものを表し、star_borderは空を表します）。

フォーム自体は非常に単純です。

<div class="star-input">
    <i class="material-icons">star_border</i>
    <i class="material-icons">star_border</i>
    <i class="material-icons">star_border</i>
    <i class="material-icons">star_border</i>
    <i class="material-icons">star_border</i>
</div>

フォームが読み込まれると、訪問者がそれを押していない間、星はマークされたものと空の状態の間で絶えず変化します。彼がいくつかの星を押すとすぐに、ステータスが凍結され、いくつかの星は塗りつぶされ、他の星は空になります（マークによって異なります）。したがって、このようにしてランキングが形成されます。それは私には明らかです。

ただし、送信後にフォームを初期状態にクリアするための解決策を作成しようとしています。送信後にページをリロードせずに開いた場合、過去の値が保存されたままになります。

JavaScriptの関数コードは次のとおりです。

prepareThemes.prototype.initReviewDialog = function() {
  const dialog = document.querySelector("#dialog-add-review");
  this.dialogs.add_review = new mdc.dialog.MDCDialog(dialog);

  this.dialogs.add_review.listen("MDCDialog:accept", () => {
    let pathname = this.getCleanPath(document.location.pathname);
    let id = pathname.split("/")[2];

    if (
      !dialog.querySelector("#text").value ||
      !dialog.querySelector("#textwhoareyou").value
    ) {
      alert("No text");
      return;
    } else {
      this.addRating(id, {
        rating,
        text: dialog.querySelector("#text").value,
        userName: dialog.querySelector("#textwhoareyou").value,
        timestamp: new Date(),
        userId: firebase.auth().currentUser.uid
      }).then(() => {
        this.rerender();
      });
      dialog.querySelector("#text").value = "";
      dialog.querySelector("#textwhoareyou").value = "";
    }
  });

  let rating = 0;

  dialog.querySelectorAll(".star-input i").forEach(el => {
    const rate = () => {
      let after = false;
      rating = 0;

      [].slice.call(el.parentNode.children).forEach(child => {
        if (!after) {
          rating++;
          child.innerText = "star";
        } else {
          child.innerText = "star_border";
        }
        after = after || child.isSameNode(el);
      });
    };
    el.addEventListener("mouseover", rate);
  });
};

アドバイスありがとうございます。みなさん、こんにちは。

アムル・アリー

簡単な解決策は、フォームの送信後にdivを再構築することです。これにより、次のようなことができます。

 function doRate() {
  document.querySelectorAll('.star-input i').forEach(el => {
const rate = () => {
  let after = false;
  rating = 0;

  [].slice.call(el.parentNode.children).forEach(child => {
    if (!after) {
      rating++;
      child.innerText = 'star';
    } else {
      child.innerText = 'star_border';
    }
    after = after || child.isSameNode(el);
  });
};

el.addEventListener('mouseover', rate);
});
};

doRate();

document.querySelector('#my-form')
  .addEventListener('submit', function(e) {
    e.preventDefault();

    // Do you logic here
 
    // And after that rebuild your div        
    var myDiv = document.querySelector('.star-input');
    myDiv.innerHTML = `
    <i class="material-icons">star_border</i>
    <i class="material-icons">star_border</i>
    <i class="material-icons">star_border</i>
    <i class="material-icons">star_border</i>
    <i class="material-icons">star_border</i>`;
    
    doRate();
  })

<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">
<form id="my-form">
<div class="star-input">
    <i class="material-icons">star_border</i>
    <i class="material-icons">star_border</i>
    <i class="material-icons">star_border</i>
    <i class="material-icons">star_border</i>
    <i class="material-icons">star_border</i>
</div>
<button id="my-button">Rate!</button>
</form>

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]