Как показать или скрыть изображение в HTML - PullRequest
Новая
       1

Как показать или скрыть изображение в HTML

0 голосов
/ 26 мая 2019

В следующем коде HTML / JS, если я введу действительный идентификатор электронной почты, должна появиться кнопка команды и отметка.Но командная кнопка работает отлично.Отметка не появляется.Любой, пожалуйста, помогите. 

<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>

Ответы [ 3 ]

0 голосов
/ 26 мая 2019 
<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>
0 голосов
/ 26 мая 2019 
<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>```
0 голосов
/ 26 мая 2019

Есть несколько ошибок, которые нарушают работу скрипта в вашем коде

  1. Нет "=" для присвоения идентификатора тегу изображения

  2. Избыточная двойная кавычка в конце инструкции

    img1.style = "display: block" ";

ЕслиВы исправляете их все, это должно работать.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...