提交表单后如何让输入值显示在屏幕上？答案

【问题标题】：How can i get the input value to display on the screen after submitting the form?提交表单后如何让输入值显示在屏幕上？
【发布时间】：2020-07-26 20:48:20
【问题描述】：

我正在做一个应用程序，检查一个单词是否是回文，如果是回文，它会在提交表单后在屏幕上显示该单词并说（单词+“是回文！”）。我什至无法将它发送到 console.log 或者不知道如何让它识别已输入的值。

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pallindrome Checker</title>
</head>
<body>
    <h1>Pallindrome Checker</h1>
    <form id='form'>
     <input id = 'pal' type = 'text'/>

     <input id = 'submit' type = 'button' value='submit' />
    </form>

    
           <script src='script.js'></script>
</body>
</html>

Javascript 代码

function pallindrome(e){
    e.preventDefault();
        
    let letters = [];

    let rword="";
    
    let word = document.getElementById("pal").value = "";
    
    for (let i = 0; i < word.length; i++){e
        letters.push(word[i]);
    }
    
    for (let i = 0; i < word.length; i++){
        rword += letters.pop();
    }
    
    if(rword === word) {
        console.log(word + "is a pallindrome!")
        
    }
        else{
            console.log(word + "is not a pallindrome!")
        }
    
   
}

document.getElementById("submit").addEventListener("click", pallindrome, false);

【问题讨论】：

标签： javascript html forms algorithm palindrome

【解决方案1】：

修改这一行以获得输入元素的值：

let word = document.getElementById("pal").value;

function pallindrome(e){
    e.preventDefault();
        
    let letters = [];

    let rword="";
    
    let word = document.getElementById("pal").value;
    
    for (let i = 0; i < word.length; i++){e
        letters.push(word[i]);
    }
    
    for (let i = 0; i < word.length; i++){
        rword += letters.pop();
    }
    
    if(rword === word) {
        console.log(word + " is a pallindrome!")
        
    }
        else{
            console.log(word + " is not a pallindrome!")
        }
}

document.getElementById("submit").addEventListener("click", pallindrome, false);

【讨论】：

【解决方案2】：

只在构建反向单词时连接

function pallindrome(e){
    e.preventDefault();
        
    let letters = [];

    let rword='';
    
    let word = document.getElementById("pal").value ;
   
    
    for (let i = 0; i < word.length; i++){e
        rword =rword + word[word.length-1-i];
    }
    
    
    
    
    
    if(rword === word) {
        console.log(word + " is a pallindrome!")
        
    }
        else{
            console.log(word + " is not a pallindrome!")
        }
    
   
}

document.getElementById("submit").addEventListener("click", pallindrome);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pallindrome Checker</title>
</head>
<body>
    <h1>Pallindrome Checker</h1>
    <form id='form'>
     <input id = 'pal' type = 'text'/>

     <input id = 'submit' type = 'button' value='submit' />
    </form>

    
           <script src='script.js'></script>
</body>
</html>

【讨论】：

【解决方案3】：

您可以控制台日志，也可以显示警报

function pallindrome(e){
    e.preventDefault();
        
      let letters = [];

      let rword="";
      let word = document.getElementById("pal").value;
      
    
      for (let i = 0; i < word.length; i++){e
          letters.push(word[i]);
      }
    
      for (let i = 0; i < word.length; i++){
          rword += letters.pop();
      }
    
      if(rword === word) {
         console.log(word + "is a pallindrome!");
        alert('pallindrome');
      }else{
          console.log(word + "is not a pallindrome!");
        alert('not');
      }
}

document.getElementById("submit").addEventListener("click", pallindrome, false);

https://codepen.io/mhfuad/pen/jOWRxWw

【讨论】：