如何正确地将 HTML 输入字段中的文本链接到 JavaScript

Question

我正在尝试制作一个简单的回文检查器。

当我在控制台中测试时，它工作正常。 但是，当我尝试将它与 HTML 链接时，我无法让它工作。 我认为这是由于从 HTML 文件的输入字段中提取文本时出错...

Javascript：

const str = document.getElementById('input').value;


function reverseString(str){
    let string = str.toLowerCase();
    let splitStr = string.split('');
    let revString = splitStr.reverse('');
    let joinStr = revString.join('');
    return joinStr;
}

function compare(str){
 if (reverseString(str) === str){
        document.querySelector("#answer").innerHTML = 'Its a Palindrom';
    } else {
        document.querySelector("#answer").innerHTML =  'Its not a Palindrom';
    }
}

HTML

<body>
    <div class="checkerContainer">
        <h1 id="heading">Palendrom Checker</h1>
        <h2 id="subtext">Enter a word of phrase!</h2>
        <div id="answer">Answer will output here!</div>
        <input type="text" id="input" placeholder="Enter your word or phrase here!">
        <button type="button" id="submit" onclick="compare(str)">Check!</button>
    </div>  
</body>

当我将compare(str)更改为输出到控制台时，它工作正常：

const str = document.getElementById('input').value;


function reverseString(str){
    let string = str.toLowerCase();
    let splitStr = string.split('');
    let revString = splitStr.reverse('');
    let joinStr = revString.join('');
    return joinStr;
}

function compare(str){
 if (reverseString(str) === str){
        console.log('Its a Palindrom')
    } else {
        console.log('Its not a Palindrom')
    }
}

Answer 1

您必须在测试时从输入中检索字符串，因此您必须在compare中获取它。 你现在是如何拥有它的，你在输入任何东西之前就得到了输入值。

function compare(){
  const str = document.getElementById('input').value;
  if (reverseString(str) === str){
        document.querySelector("#answer").innerHTML = 'Its a Palindrom';
  } else {
        document.querySelector("#answer").innerHTML =  'Its not a Palindrom';
  }
}

如何正确地将 HTML 输入字段中的文本链接到 JavaScript

问题描述

1 个解决方案

解决方案1
1 已采纳 2022-07-06 17:17:33

如何正确地将 HTML 输入字段中的文本链接到 JavaScript

问题描述

1 个解决方案

解决方案1 1 已采纳 2022-07-06 17:17:33

解决方案1
1 已采纳 2022-07-06 17:17:33