Javascript隐藏和显示css

我有一个类值为“.feedback preview”的HTML元素，我还有一个CSS将其显示为none。我正试图利用Javascript来展示这个特性。我不确定我做错了什么，下面将提供代码

理想情况下，我试图复制的是有一个表单，在表单中输入信息之前，表单不应显示预览或提交按钮。这是我参加的一个网络开发课程。提前感谢，我将显示我正在使用的所有代码

document.querySelector(".feedback-from").textContent = "Faduma Egal";
document.querySelector(".feedback-content").textContent = "Do you allow pets?";

// Create Variables

var fromValue = document.querySelector(".feedback-from");
var feedbackValue = document.querySelector(".feedback-content");
var nameField = document.querySelector("#nameinput");
var feedbackField = document.querySelector("#other-info");
var form = document.querySelector(".contact-form");
var feedbackPreview = document.querySelector(".feedback-preview");
var submitButton = document.querySelector(".submitbutton");
//add text to preview section

function completePreview() {
    fromValue.textContent = nameField.value;
    feedbackValue.textContent = feedbackField.value; 
    feedbackPreview.className = "feedback-preview show";

    if (form.checkValidity() === true) {
        submitButton.className = "submitbutton show";
    }
}

completePreview();


// create event listeners for changes to form

form.addEventListener("change", completePreview, false);


/* CSS */ 

/* fieldset styles */
fieldset {
   margin-bottom: 0.8em;
}
legend {
   font-size: 1.25em;
}
.reserveinfo {
   position: relative;
}

.submitbutton {
   display: none;
}

/* field styles */
input, textarea {
   border: 1px solid #ccc;
   padding: 0.2em;
   font-size: 1em;
   display: block;
}
.contactinfo input, .additionalinfo input {
   width: 25em;
   margin-bottom: 0.6em;
}
textarea {
   width: 25em;
   height: auto;
}
#submit {
   border: none;
   padding: 0.4em 0.6em;
   margin: 0 auto;
   background-color: #e3d5ba;
   font-size: 1.25em;
   border-radius: 10px;
}

/* label styles */
label {
   margin: 0.8em 0;
   font-size: 1em;
   line-height: 1.6em;
   font-weight: bold;
}

/* feedback preview section */
.feedback-preview {
   max-width: 400px;
   padding: 10px;
   margin: 0 auto;
   border: 2px solid black;
   font-size: 1.3em;
   background-color: white;
   display: none;
}

.show {
   display: block;
}

.feedback-preview p {
   margin-bottom: 0.3em;
}
.table-row {
   display: table-row;
}
.table-row div:first-child {
   font-weight: bold;
}
.table-cell {
   padding: 0 0.2em;
   display: table-cell;
}
.feedback-content {
   padding: 0.4em 0.2em 0;
}

/* footer section */
footer {
   max-width: 800px;
   margin: 0 auto;
   padding: 0.6em 0;
   background-color: #34180f;
   color: ivory;
   text-align: center;
}

/* print styles */
@media print {
   body, h1, article, footer {
      color: rgb(0,0,0);
      background: rgb(255,255,255);
   }
   body {
      max-width: 100%;
   }
   nav {
      display: none;
   }
}
@page {
   margin: 0.75in;
}





<!-- HTML -->

<fieldset class="submitbutton">
               <input type="submit" id="submit" value="Submit">
            </fieldset>
         </form>
         <div class="feedback-preview">
            <div class="table-row">
               <div class="table-cell">
                  <p>To: </p>
               </div>
               <div class="table-cell">
                  <p>Phillip Blaine, Lakeland Reeds</p>
               </div>
            </div>
            <div class="table-row">
               <div class="table-cell">
                  <p>From:</p>
               </div>
               <div class="table-cell">
                  <p class="feedback-from"></p>
               </div>
            </div>
            <div class="table-row">
               <div class="table-cell">
                  <p>Subject:</p>
               </div>
               <div class="table-cell">
                  <p>Feedback/question</p>
               </div>
            </div>
            <p class="feedback-content"></p>
         </div>
      </article>
      <footer>
         <p>45 Marsh Grass Ln. &bull; Marble, MN 55764 &bull; (218) 555-5253</p>
      </footer>
         <script src="script.js"></script>
   </body>
</html>

document.querySelector（“.feedbackfrom”）.textContent=“Faduma Egal”；
document.querySelector（“.feedback content”）.textContent=“您允许宠物吗？”；
//创建变量
var fromValue=document.querySelector（“.feedback from”）；
var feedbackValue=document.querySelector（“.feedback content”）；
var nameField=document.querySelector（“#nameinput”）；
var feedbackfeld=document.querySelector（“其他信息”）；
var form=document.querySelector（“.contact form”）；
var feedbackPreview=document.querySelector（“.feedbackPreview”）；
var submitButton=document.querySelector（“.submitButton”）；
//将文本添加到预览部分
函数completePreview（）{
fromValue.textContent=nameField.value；
feedbackValue.textContent=feedbackField.value；
feedbackPreview.className=“反馈预览显示”；
if（form.checkValidity（）==true）{
submitButton.className=“submitButton show”；
}
}
completePreview（）；
//为表单更改创建事件侦听器
表.增补的列表（“变更”，完整审查，假）；
/*CSS*/
/*字段集样式*/
字段集{
边缘底部：0.8em；
}
传奇{
字号：1.25em；
}
.reserveinfo{
位置：相对位置；
}
.提交按钮{
显示：无；
}
/*字段样式*/
输入，文本区{
边框：1px实心#ccc；
填充：0.2米；
字号：1em；
显示：块；
}
.contactinfo输入、.additionalinfo输入{
宽度：25em；
边缘底部：0.6em；
}
文本区{
宽度：25em；
高度：自动；
}
#提交{
边界：无；
填充：0.4em 0.6em；
保证金：0自动；
背景色：#e3d5ba；
字号：1.25em；
边界半径：10px；
}
/*标签样式*/
标签{
保证金：0.8em0；
字号：1em；
线高：1.6em；
字体大小：粗体；
}
/*反馈预览部分*/
.反馈预览{
最大宽度：400px；
填充：10px；
保证金：0自动；
边框：2件纯黑；
字体大小：1.3em；
背景色：白色；
显示：无；
}
.表演{
显示：块；
}
.反馈预览{
边缘底部：0.3em；
}
.表格行{
显示：表格行；
}
.表行div：第一个子级{
字体大小：粗体；
}
.表格单元格{
填充：0.2米；
显示：表格单元格；
}
.反馈内容{
填充：0.4em 0.2em 0；
}
/*页脚部分*/
页脚{
最大宽度：800px；
保证金：0自动；
填充：0.6em0；
背景色：#34180f；
颜色：象牙色；
文本对齐：居中；
}
/*打印样式*/
@媒体印刷品{
正文、h1、文章、页脚{
颜色：rgb（0,0,0）；
背景：rgb（255255）；
}
身体{
最大宽度：100%；
}
导航{
显示：无；
}
}
@页面{
边缘：0.75英寸；
}
致：

菲利普·布莱恩，莱克兰芦苇

发件人：


主题：
反馈/问题


45沼泽草林&公牛；大理石，明尼苏达州55764和布尔；（218）555-5253

一个问题是您正在应用两个类，一个带有

display:block

，另一个带有

display:none

。也许您的

.show

CSS定义应该是

display:none！重要的

为确保覆盖

显示：无

请更新完整的HTML代码…表单HTML代码不完整您正在寻找类似的内容吗-