如何使用 JavaScript 在没有警告框的情况下显示错误？

JavaScript 中的错误可以在不使用警告框的情况下显示，但使用警告框是传统的方式。我们可以在不使用警告框的情况下使用两种方法显示错误。

方法 1：通过使用textContent属性。 textContent基本上用于动态更改任何节点的内容。借助此属性，我们可以显示任何内容并像警告框一样吸引用户的注意力

• 句法：

  node.textContent = "Some error message"
  
  // To draw attention
  node.style.color = "red";  
  

• 例子：

    
  
      
      
      Demo
      
          h1 {
              color: green;
          }
          .container {
              padding: 15px;
              width: 400px;
          }
            
          label,
          input {
              margin-bottom: 10px;
          }
            
          button {
              float: right;
              margin-right: 10px;
              background-color: green;
          }
      
  
    
  
      
          GeeksforGeeks
          Display error without alert box 
          
          
              
                  Uername:
                  
              
              
                  Phone no:
                  
                  
              
              
                  Submit
              
          
      
  
  
      function errorMessage() {
          var error = document.getElementById("error")
          if (isNaN(document.getElementById("number").value)) 
          {
                
              // Changing content and color of content
              error.textContent = "Please enter a valid number"
              error.style.color = "red"
          } else {
              error.textContent = ""
          }
      }
  
    

• 输出：
  

方法 2：通过使用innerHTML属性。 innerHTML可用于更改选定节点的 HTML。除了textContent和innerHTML ，还可以使用innerText ，这将导致相同的输出。

• 句法：

  node.innerHTML = "
                      Please enter a valid number
                    "

• 例子：

    
  
      
      
      Demo
      
          h1 {
              color: green;
          }
          .container {
              padding: 15px;
              width: 400px;
          }
            
          label,
          input {
              margin-bottom: 10px;
          }
            
          button {
              float: right;
              margin-right: 10px;
              background-color: green;
          }
      
  
    
  
      
          GeeksforGeeks
          Display error without alert box 
          
          
              
                  Uername:
                  
              
              
                  Phone no:
                  
                  
              
              
                  Submit
              
          
      
  
  
      function errorMessage() {
          var error = document.getElementById("error")
          if (isNaN(document.getElementById("number").value)) 
          {
    
              // Changing HTML to draw attention
              error.innerHTML = "<span style='color: red;'>"+
                          "Please enter a valid number</span>"
          } else {
              error.innerHTML = ""
          }
      }
  
    
                      

• 输出：