Question

我正在构建一个简单的演示应用程序，该应用程序将告诉用户输入字段中的两个单词是否等距（相同的单词长度）或提交时是否不正确。我已经写出逻辑，但是我没有得到任何返回的值，我似乎已经跳过了一些事情。

index.html

 <body>

    <header>
      <h1>
        Isomorphic Strings
      </h1>
      <p>
        Two strings are called isomorphic if their lengths are equal.
      </p>
    </header>

    <section>
      <div class="container">
        <h2 class>
          Please input the strings you want to compare
        </h2>
        <form>          
          <input type="text" placeholder="Input a word" id="string1" >          
          <input type="text" placeholder="Input another word" id="string2">
          <button type="submit" onclick=isIsoMorphic()>
            Check isormorphism
          </button>
        </form>
        <div id="information">
          <p><p>
        </div>
      </div>      
    </section>

    <footer>
      &copy; Simpcyclassy 2019
    </footer>

  </body>

index.js

const result = document.querySelector('#information');

const stringOne = document.querySelector('#string1');

const stringTwo = document.querySelector('#string2');

function isIsomorphic() {    
    str1 = stringOne.value.trim().length;
    str2 = stringTwo.value.trim().length;

    for (let i = 0; i < str1 i++) {

      if ([str1[i]] !== str2[i]) {
            result.style.color = 'red';
            result.innerHTML = 'Strings are not isomorphic'
            return false;
       } else if ([str1[i]] === str2[i]){
         return true;
         result.style.color = "green";
         result.innerHTML = 'Strings are isomorphic'         
       } else {
         return false;
         result.style.color = 'red';
         result.innerHTML = 'Please input missing field';        
       }
    }
}

Answer 1

将onclick=isIsoMorphic()添加为按钮的属性。没有调用事件侦听器，因此单击按钮时它不会知道。

Answer 2

此修改后的代码应该有效

const result = document.querySelector('#information');

const stringOne = document.querySelector('#string1');

const stringTwo = document.querySelector('#string2');

function isIsomorphic() {
  str1 = stringOne.value.trim().length;
  str2 = stringTwo.value.trim().length;
  var isIsomorphic = true;

  if (str1 > 0 && str2 > 0) {
    if (str1 !== str2) {
      result.style.color = 'red';
      result.innerHTML = 'Strings are not isomorphic'
      isIsomorphic = false;
    } else if (str1 === str2) {
      result.style.color = "green";
      result.innerHTML = 'Strings are isomorphic'
    }
  } else {
    result.style.color = "red";
    result.innerHTML = 'Fill in empty fields'
    isIsomorphic = false;
  }
  return isIsomorphic
}

<header>
  <h1>
    Isomorphic Strings
  </h1>
  <p>
    Two strings are called isomorphic if their lengths are equal.
  </p>
</header>

<section>
  <div class="container">
    <h2 class>
      Please input the strings you want to compare
    </h2>
    <form>
      <input type="text" placeholder="Input a word" id="string1">
      <input type="text" placeholder="Input another word" id="string2">
      <button type="button" onclick="isIsomorphic()">
            Check isormorphism
          </button>
    </form>
    <div id="information">
      <p>
        <p>
    </div>
  </div>
</section>

<footer>
  &copy; Simpcyclassy 2019
</footer>

Answer 3

除了@Ismail ashish的答案以外，还有几件事：

str1和str2是数字。此数组语法没有意义：str1[i]。
我认为您不希望在if语句中使用这些附加的即席数组括号：[str1[i]]
由于str1和str2是数字，因此我认为您并不需要for循环。
在else if和else中，您在return之后有代码...返回将停止执行该函数，因此这些函数应该是最后一个。
表单具有您可能不希望的默认行为。要停止表单的默认行为，您将需要更改<button type="submit" onclick="isIsomorphic(event);">，以便可以访问事件，然后在函数中为事件添加preventDefault()。
这只是一个建议，但我在这里更喜欢onsubmit而不是onclick。大多数浏览器都允许您通过在输入字段中按Enter来“提交”表单，onclick会错过这个表单。

将它们放在一起：

如果您真的只想比较字符串的长度，我认为您可能会完全失去for循环，而只需执行以下操作：

function isIsomorphic(e) {
  e.preventDefault();
  str1 = stringOne.value.trim().length;
  str2 = stringTwo.value.trim().length;
console.log(str1, str2);
  if (str1 !== str2) {
    result.style.color = 'red';
    result.innerHTML = 'Strings are not isomorphic';
    return false;
  } else if (str1 === str2) {
    result.style.color = 'green';
    result.innerHTML = 'Strings are isomorphic';
    return true;
  } else {
    result.style.color = 'red';
    result.innerHTML = 'Please input missing field';
    return false;
  }
}

Answer 4

@Ismail和@ David784是正确的。

HTML：

<header>
      <h1>
        Isomorphic Strings
      </h1>
      <p>
        Two strings are called isomorphic if their lengths are equal.
      </p>
    </header>

    <section>
      <div class="container">
        <h2 class>
          Please input the strings you want to compare
        </h2>
        <form action="" method="POST" onsubmit="return isIsomorphic()">          
          <input type="text" placeholder="Input a word" id="string1" name="string1">          
          <input type="text" placeholder="Input another word" id="string2" name="string2">
          <button type="submit" value="submit">
            Check isormorphism
          </button>
        </form>
        <div id="information">
          <p><p>
        </div>
      </div>      
    </section>

    <footer>
      &copy; Simpcyclassy 2019
    </footer>

JavaScript：

<script>
function isIsomorphic() {

    const result = document.querySelector('#information');

    const stringOne = document.querySelector('#string1').value.trim();

    const stringTwo = document.querySelector('#string2').value.trim();

    //Conver input text in array
    var stringOneArray = stringOne.split('');
    var stringTwoArray = stringTwo.split('');

    // Get the number of characters
    str1 = stringOne.length;
    str2 = stringTwo.length;

    // Check if the character length is equal
    if(str1 == str2){

        for (i = 0; i < str1; i++) {

            if (stringOneArray[i] !== stringTwoArray[i]) {

                    result.style.color = 'red';
                    result.innerHTML = 'Strings are not isomorphic';
                    return false;

            } else if (stringOneArray[i] === stringTwoArray[i]){ 

                result.style.color = "green";
                result.innerHTML = 'Strings are isomorphic'; 
                // return; stops the code and the code after is doesn't executes.
                return true;   

            } else {

                result.style.color = 'red';
                result.innerHTML = 'Please input missing field';
                // return; stops the code and the code after is doesn't executes. 
                return false;   

            }      

        }

    }

}
</script>

我如何获得返回期望值的按钮

4 个答案: