Question

在以下HTML / JS代码中，如果我输入有效的电子邮件ID，则应显示一个命令按钮和一个对勾。但是命令按钮可以正常工作。刻度线不出现。任何人都可以帮忙。

<html>
<head>

</head>
<body>
<form id="signUpForm">
  <input type="email" id="emailField" required>
  <button id="okButton" style="display:none">OK</button>
  <img id "img1" src="valid.jpg" width=100px style="display:none"/>

</form>

<script>
const signUpForm = document.getElementById('signUpForm');
const emailField = document.getElementById('emailField');
const flag1 = document.getElementById('okButton');
const img1 = document.getElementById('img1');

emailField.addEventListener('keyup', function (event) {
  isValidEmail = emailField.checkValidity();

  if ( isValidEmail ) {
        flag1.style="display:inline";
        img1.style="display:block"";
  } else {    
        flag1.style="display:none";
        img1.style="display:none";
 }
});

okButton.addEventListener('click', function (event) {
  signUpForm.submit();
});
</script>

</body>
</html>

Answer 1

有一些错误会破坏代码中的脚本流程

没有“ =”表示图像标签的ID分配
指令末尾的多余双引号

img1.style =“ display：block”“;

如果全部纠正，它应该可以工作。

Answer 2

<html>
<head>

</head>
<body>
<form id="signUpForm">
  <input type="email" id="emailField" required>
  <button id="okButton" style="display:none">OK</button>
  <!-- fixed: id "img1" -> id="img1", width=100px -> width="100px" -->
  <img id="img1" src="valid.jpg" width="100px" style="display:none"/>

</form>

<script>
const signUpForm = document.getElementById('signUpForm');
const emailField = document.getElementById('emailField');
const flag1 = document.getElementById('okButton');
const img1 = document.getElementById('img1');

emailField.addEventListener('keyup', function (event) {
  isValidEmail = emailField.checkValidity();

  if ( isValidEmail ) {
        flag1.style="display:inline";
        img1.style="display:block"; //removed 3rd double quote
  } else {    
        flag1.style="display:none";
        img1.style="display:none";
 }
});

okButton.addEventListener('click', function (event) {
  signUpForm.submit();
});
</script>

</body>
</html>

Answer 3

<html>
</head>
<body>
<form id="signUpForm">
  <input type="email" id="emailField" required>
  <button id="okButton" style="display:none">OK</button>
  <!--You Missed Equlas to sign in id -->
  <img id ="img1" src="valid.jpg" width=100px style="display:none"/>

</form>

<script>
const signUpForm = document.getElementById('signUpForm');
const emailField = document.getElementById('emailField');
const flag1 = document.getElementById('okButton');
const img1 = document.getElementById('img1');

emailField.addEventListener('keyup', function (event) {
  isValidEmail = emailField.checkValidity();

  if ( isValidEmail ) {
        flag1.style="display:inline";
        img1.style="display:block";
  } else {    
        flag1.style="display:none";
        img1.style="display:none";
 }
});

okButton.addEventListener('click', function (event) {
  signUpForm.submit();
});
</script>

</body>
</html>```

如何在HTML中显示或隐藏图像

3 个答案: