javascript - 表格不适用于学校元素。我还必须将答案放入数组中

Question

据我所见，html 似乎没问题，但 javascript 无法正常工作。我还需要将答案放入数组中，但这是我可以处理的稍后问题。

     <form>
        <fieldset>
            <legend>Content:</legend>
                <label><input type ="radio" name ="content" value="bad"/>bad</label>
                <label><input type ="radio" name ="content" value="average"/> average</label>
                <label><input type ="radio" name ="content" value="good"/> good</label>
                <label><input type ="radio" name ="content" value="excellent"/> excellent</label>
        </fieldset>
        <br>
        <fieldset>
                <legend>Style:</legend><h5>the site needs more:</h5>
                <label2><input type ="checkbox" name="style"value="color"/>color</label2>
                <label2><input type ="checkbox" name="style" value="whitespace"/> 
       whitespace</label2>
                <label2><input type ="checkbox" name="style"value="Texture"/> Texture</label2>
                <label2><input type ="checkbox" name="style" value="Icons"/> Icons</label2>
        </fieldset>
        <br>
        <fieldset>
                <legend>Usability:</legend>  
                <label><input type ="radio" name="usability" value="bad"/>bad</label>
                <label><input type ="radio" name="usability" value="average"/> average</label>
                <label><input type ="radio" name="usability" value="good"/> good</label>
                <label><input type ="radio" name="usability" value="excellent"/> excellent</label>
        </fieldset>
        <br>
        <fieldset>
                <legend>Theme:</legend>
                <label><input type ="radio" name ="Theme" value="bad"/>bad</label>
                <label><input type ="radio" name ="Theme" value="average"/> average</label>
                <label><input type ="radio" name ="Theme" value="good"/> good</label>
                <label><input type ="radio" name ="Theme" value="excellent"/> excellent</label>
        </fieldset>
        <br>   
        <fieldset>
                <legend>Optimization</legend>
                <label><input type ="radio" name ="Optimization" value="bad"/>bad</label>
                <label><input type ="radio" name ="Optimization" value="average"/> average</label>
                <label><input type ="radio" name ="Optimization" value="good"/> good</label>
          <label><input type ="radio" name ="Optimization" value="excellent"/> excellent</label>
        </fieldset>        
        <input type="button" value ="Submit">
    </form>

事件监听器不工作我假设它是因为检查功能必须有问题。我仍在学习基础知识。

    var contentflag = false, styleflag = false, usabilityflag = false, themeflag = optimizationflag 
 = false;
          
          var btnSubmit = document.querySelector("input[type='button']");
          
           
          btnSubmit.addEventListener("click", check);
          
          function check(){
            
            var messages = [];
            messages.push(checkcontent());  
            messages.push(checkstyle());
            messages.push(checkusability());
			messages.push(checktheme());
			messages.push(checkoptimization());
      
            if (contentflag && styleflag && usabilityflag && themeflag && optimizationflag){
             
              var content = document.querySelector("input[name='content']:checked").value;
              
              var styleFields = 
Array.prototype.slice.call(document.querySelectorAll("input[name='style']:checked"));
              
             
              var style = styleFields.map(function(item){
                return item.value;
              });
              
              
              style = style.join(", ");
              
              var usability = document.querySelector("input[name='usability']:checked").value;
              var theme = document.querySelector("input[name='theme']:checked").value;
			  var optimization = document.querySelector("input[name='optimization']:checked").value;
             
              alert("thank you for your input");
            } else {
             var message = messages.join(", ");
              alert("You haven't selected: " + message);
            }
          } 
      
          function checkcontent(){	
           if(document.querySelector("input[name='content']:checked")){
              contentflag = true;
            } else { 
              contentflag = false; 
              return "content";
            }
          }
      
          function checkstyle(){	
            if(document.querySelector("input[name='style']:checked")){
             styleflag = true;
            } else { 
              styleflag = false;
              return "style";	
            }			
          }
      
          function checkusability(){	
            if (document.querySelector("input[name='usability']:checked")){
				usabilityflag = true;
            } else {
				usabilityflag = false;
              return "usability";	
            }
          }
      
          function checktheme(){	
            if (document.querySelector("input[name='theme']:checked")){
				themeflag = true;
            } else { 
				themeflag = false;
              return "theme";
            }
			
			function checkoptimization(){	
				if (document.querySelector("input[name='optimizationt']:checked")){
					optimizationflag = true;
				} else { 
					optimizationflag = false;
				  return "optimization";
				}
			}
		}

Answer 1

当我运行您的 javascript 代码片段时，它给出了错误消息:

"message": "Uncaught TypeError: Cannot read property 'addEventListener' of null",

这意味着您的变量 btnSubmit 不是提交按钮。

document.querySelector("input[type='button']");

如果您的文档中只有一个带有类型按钮的输入，这将给出一个有效元素。您在此处发布的 HTML 之外还有更多内容吗？你可以通过给它一个 id 来解决它，例如id="btn-submit"而不是

var btnSubmit = document.querySelector("#btn-submit")

或

var btnSubmit = document.getElementById("btn-submit")