innerHTML не отображается должным образом

Проблема, с которой я столкнулся, заключается в том, что если пользователь покидает поле ввода userdata, я хочу, чтобы оно предназначалось для ввода и отображения текста, уведомляя их о том, что это обязательное поле.innerHTML не отображается должным образом

Я использую innerHTML для отправки сообщения div или непосредственно в поле ввода, но ничего не отображается. Я также пытался использовать <p>, <span>, и это тоже не сработало. Любая помощь приветствуется.

<!doctype html> 
<html> 
    <head> 
    </head> 
    <body> 
    <form> 
     <input type="text" id="user1"> 
     <div id="error"></div> 
     <button onClick="test()">Work</button> 
    </form> 
    <script type="text/javascript"> 
     function test(){ 
     var userdata = document.getElementById("user1").value; 
     if(userdata == ""){ 
      document.getElementById("error").innerHTML="Please fill in Blanks"; 
     } 
     } 
    </script> 
    </body> 
</html>

источник

2013-07-20 Hugo

«Я также пытался использовать \ п \ п, и ничего работал ", что такое' \ n \ n'? –

@LightStyle '\ n' - это новый символ строки в javascript. – starbeamrainbowlabs

@starbeamrainbowlabs ROTFL Я знаю, OP забыл использовать кодовые цитаты '' в качестве разделителей для своих собственных тегов, поэтому они не отображались, см. Редактирование, чтобы понять, что я говорю;) –

Просто измените кнопку линии таким образом:

<button onClick="test();return false;">Work</button>

InnerHTML работает нормально, но по умолчанию кнопки делал запрос «POST», что делает страницу, чтобы обновить стирая innerHtml изменяется. Возвращаемое ложное утверждение отключает это поведение по умолчанию, заставляя ваш код работать так, как он должен делать.

Он протестирован и работает. Надеюсь, это помогает.

источник

2013-07-20 08:01:47 Jonathan

почему 'return false'? он должен работать без него – fmodos

+1 для объяснения – fmodos

Спасибо @fmodos. Имейте в виду, что я действительно далек от того, чтобы быть экспертом в веб-разработчике, поэтому, вероятно, это лучший и элегантный способ сделать это. Но ¡Эй, это работает! ;) – Jonathan

Вот JSBIN

HTML

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=utf-8 /> 
<title>JS Bin</title> 
</head> 
<body> 
    <form> 
     <input type="text" id="user1"> 
     <div id="error"></div> 
     <button onClick="test();return false;">Work</button> 
    </form> 
</body> 
</html>

И в JavaScript добавить еще условие также

if(userdata === ""){ 
    document.getElementById("error").innerHTML="Please fill in Blanks"; 
} else{ 
    document.getElementById("error").innerHTML=""; 
}

источник

2013-07-20 08:08:18

Лучше добавить условие else в функцию javascript, потому что, после ввода пустого значения и щелчка на работе, он работает нормально, но после ввода значения и повторного нажатия на работу, тогда внутренний HTML-код, пожалуйста, заполните пробелы ... это неправильно. Так что лучше добавить еще условие. –

Вы можете использовать простой трёхмерный оператор, чтобы сделать это, много кода сохранено –

Когда я добавляю else, он не работает – Hugo

innerHTML не отображается должным образом

ответ

Смежные вопросы