投稿した後にjavascriptで星形でフォームを整理する方法は？

Question

2つのアイコンを持つ星を持つシンプルなフォームがあります：star & star_border（スターはマークされたもの、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); 
    }); 
}; 

感謝。皆にとって良い一日。あなたはこのような何か行うことができますので、

Answer 1

簡単な解決策は、あなたのフォームが送信された後、再びあなたの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>