Question

我正在尝试构建一个简单的网页，该网页仅检查两个输入字段中的字符串值，以便在单击Test按钮时，先前隐藏的div将显示要返回的布尔值。（如果同构返回true，否则返回false。）

这是我的代码：

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Isomorphics App</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="styles.css" />
  </head>
  <body>
    <div class="container">
      <div class="content">
        <div class="header">
            <p class="title">Isomorphics</p>
            <span>&nbsp;</span>
            <p class="description">Find out if any two strings are isomorphic.</p>
            <span>&nbsp;</span>
            <p>Enter any two words (strings) in the fields below:</p>
          </div>
          <div class="input-container">
            <input class="input" id="s" placeholder="First string" />
            <input class="input" id="t" placeholder="Second string" />
            <button class="input-button" id="submit-button">Test</button>
          </div>
          <div class="isomorphic-state-container" id="isomorphic-state-container">
            <div class="isomorphic-state-holder" id="isomorphic-state-holder">
              <p class="isomorphic-state" id="isomorphic-state">ili</p>
            </div>
          </div>
        </div>
      </div>
    <script src="main.js"></script>
  </body>
</html>

main.js

let s = document.getElementById('s').innerText;
let t = document.getElementById('t').innerText;
console.log(s);
document.getElementById('submit-button').onclick = isomorphic(s, t);
console.log(isomorphic(s, t));

function isomorphic(str1, str2) {
  if (str1.length !== str2.length) {
    alert('Please enter two strings of equal length.');
  }
  let map = {};
  for (let i = 0; i < str1.length; i++){
    let a = str1[i]; 
    let b = str2[i];
    if (typeof map[a] === 'undefined') {
      map[a] = b;
    } else if (map[a] !== b) {
      // alert(false);
      document.getElementById('isomorphic-state-container').style.display = 'block';
      document.getElementById('isomorphic-state-holder').style.backgroundColor = 'red';
      document.getElementById('isomorphic-state').innerText = 'False'
    }
    for (var key in map) {
      if (key !== a && b === map[key]) {
        // alert(false);
        document.getElementById('isomorphic-state-container').style.display = 'block';
        document.getElementById('isomorphic-state-holder').style.backgroundColor = '#D64BFB';
        document.getElementById('isomorphic-state').innerText = 'False'
      }
    }
  }
  document.getElementById('isomorphic-state-container').style.display = 'block';
  document.getElementById('isomorphic-state-holder').style.backgroundColor = 'green';
  document.getElementById('isomorphic-state').innerText = 'True'
}

styles.css

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Roboto Mono;
  font-size: 16px;
}
*:focus {
  outline: none;
}
.header {
  color: #FFFFFF;
  text-align: center;
}
.header .title {
  font-size: 36px;
}
.header .description {
  font-size: 16px;
}
.container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  width: 100vw;
  background-color: #000000;
}
.container .content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  height: 65%;
  width: 100%;
}
.container .content .input-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  width: 50%;
  height: 150px;
}
.container .content .input-container .input {
  width: 100%;
  height: 40px;
  font-size: 16px;
  padding-left: 10px;
}
.container .content .input-container .input-button {
  width: 100%;
  height: 40px;
  background-color: rgba(255, 255, 255, 0.1);
  color: #FFFFFF;
  font-size: 16px;
}
.container .content .input-container .input-button:hover {
  cursor: pointer;
}
.isomorphic-state-container {
  display: none;
  width: 50%;
  height: 40px;
}
.isomorphic-state-holder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.isomorphic-state {
  color: #FFFFFF;
  font-size: 16px;
}

运行此代码后，javascript将其默认值设置为true，即使单击该按钮也不起作用。截图：

我应该怎么做才能使代码仅在单击按钮时运行？还是命名函数引起了问题？

Answer 1

此行：

document.getElementById('submit-button').onclick = isomorphic(s, t);

调用，然后按照onclick 调用 x = foo()的方式，将其返回值分配给foo结果到x。要以这种方式设置点击事件处理程序，请将 function （不是其结果）分配给onclick属性，例如：

document.getElementById('submit-button').onclick = function() {
    isomorphic(s, t);
};

（您还希望删除console.log(isomorphic(s, t));行，因为它也调用了该函数。）

如果您希望在单击按钮时获得s和t，而不是在脚本首次运行时获得，请同时将这些行移动到单击处理程序中：

document.getElementById('submit-button').onclick = function() {
    let s = document.getElementById('s').innerText;
    let t = document.getElementById('t').innerText;
    isomorphic(s, t);
};

更好的是，通过addEventListener使用现代事件处理：

document.getElementById('submit-button').addEventListener("click", function() {
    // ...handler code...
});

如果您需要支持IE8之类的过时浏览器，this answer可以解决对addEventListener缺乏支持的问题。

不过，您的代码还有其他几个问题。例如，要获取input元素的值，请使用其value属性，而不是其innerText属性（它没有任何内部文本，因为它是一个void元素）。您也不希望在alert之后返回不相等的字符串长度，这可能是您想这样做的，因为否则即使您做了alert ... < / p>

停止命名函数执行自身

1 个答案: