Показывать элемент div, когда пользователь вводит текст в другое поле

Я пытаюсь показать элемент div только тогда, когда пользователь вводит текст в другое поле.

Текстовое поле:

<input type = "text" id = "feedUrl" placeholder = "API"

Div:

div class = "col-xs-12 text-left" id = "continue" style = "display: none;">
    <a class = "btn btn-secondary" style = "margin-top:30px;" id='continueNewFeed'>
        Continue
    </a>
</div>

JaveScript:

if ($('feedUrl').val()){
    $('#continue').show(); 
}

Проблема, с которой я столкнулся, заключается в том, что div «Продолжить» не отображается всякий раз, когда я пишу на входе feedUrl.

Я что-то пропустил?

Ваш селектор неправильный. Используйте $('#feedUrl').

— 16.03.2018 20:50

Есть ли у вас слушатель на входе для обнаружения изменений?

— 16.03.2018 20:51

@AliSheikhpour Я вообще не знаю ..

— 16.03.2018 20:52

javascript jquery html

16.03.2018 20:48

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Свяжите событие input, чтобы зафиксировать изменения из этого поля ввода и проверить введенное значение.

Вместо этого используйте этот селектор:

$('#feedUrl')

var $feedUrl = $('#feedUrl')
$feedUrl.on('input', function() {
  var $continue = $('#continue');
  if ($(this).val()) $continue.show();
  else $continue.hide();
});

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type = "text" id = "feedUrl" placeholder = "API">


<div class = "col-xs-12 text-left" id = "continue" style = "display: none;">
  <a class = "btn btn-secondary" style = "margin-top:30px;" id='continueNewFeed'>
        Continue
    </a>
</div>

16.03.2018 20:53

Ответ принят как подходящий

Вы должны установить прослушиватель на входе для обнаружения изменений. Также измените селектор идентификатора, как @bukharim, упомянутый в комментариях к $("#feedUrl"):

$(document).ready(function(){
  $("#feedUrl").on("input",function(){
    if ($(this).val()){
        $('#continue').show(); 
    }
    else{
        $('#continue').hide(); 
    }
  })
})

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type = "text" id = "feedUrl" placeholder = "API">


<div class = "col-xs-12 text-left" id = "continue" style = "display: none;">
    <a class = "btn btn-secondary" style = "margin-top:30px;" id='continueNewFeed'>
        Continue
    </a>
</div>

Событие input фиксирует изменения, нажатия клавиш и т. д., Поэтому вам не нужно связывать их все.

— 16.03.2018 21:00

Да, это работает. Спасибо! В любом случае, я могу вернуть его в скрытое состояние всякий раз, когда пользователь стирает ввод?

— 16.03.2018 21:16

Я обновил ответ, чтобы охватить ваш недавний комментарий.

— 16.03.2018 21:17

16.03.2018 20:55