Как написать такой же по функционалу код только на чистом JS?

Question

Александр Rinte @verstkasanya2006

Верстаю сайты.

JavaScript

Как написать такой же по функционалу код только на чистом JS?

Вот код:

<script>
function check() {

    if ($('#input1').val() != '' && $('#input2').val() != '')

        $('#button').removeAttr('disabled');

    else

        $('#button').attr('disabled','disable');

}

Вот моя попытка решения:

function check2() {
	const input1 = document.getElementById('input1');
	const input2 = document.getElementById('input2');
	const button = document.getElementById('button');


    if (input1.value != '' && input2.value != '') {
    	button.removeAttribute('disabled');
    }
    else {
    	button.getAttribute('disabled', 'disabled');
    }

Вопрос задан более трёх лет назад
127 просмотров

Комментировать

Подписаться 1 Простой Комментировать

Решения вопроса 2

5 комментариев

Александр Rinte @verstkasanya2006 Автор вопроса

Не работает

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script language="JavaScript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js">
	</script>
</head>
<body onload="">
<script>
function check() {

    if ($('#input1').val() != '' && $('#input2').val() != '')

        $('#button').removeAttr('disabled');

    else

        $('#button').attr('disabled','disabled');

}
const input1 = document.querySelector('#input1');
const input2 = document.querySelector('#input2');
const button = document.querySelector('#button');

function check2() {
  if (input1.value != '' && input2.value != '') {
    button.disabled = false;
  } else {
    button.disabled = true;
  }
}
</script>
<input onkeyup="check2()" id="input1" type="text">
<input onkeyup="check2()" id="input2" type="text">
<button disabled id="button">wefwf</button>
</body>
</html>

Написано более трёх лет назад

Тигран Абрамян @TAbrahamyan

Александр Rinte, Я же вам в предыдушем ответе сказал что подключайте скрипт в конце body либо весь скрипт оберните в

document.addEventListener("DOMContentLoaded", function() { ... });

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <script language="JavaScript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
</head>
<body>
<input onkeyup="check2()" id="input1" type="text">
<input onkeyup="check2()" id="input2" type="text">
<button disabled id="button">wefwf</button>

<script>
const input1 = document.querySelector('#input1');
const input2 = document.querySelector('#input2');
const button = document.querySelector('#button');

function check2() {
  if (input1.value != '' && input2.value != '') {
    button.disabled = false;
  } else {
    button.disabled = true;
  }
}
</script>
</body>
</html>

Написано более трёх лет назад

Александр Rinte @verstkasanya2006 Автор вопроса

TAbrahamyan, А в чем проблема была?

Написано более трёх лет назад
Тигран Абрамян @TAbrahamyan

Александр Rinte, Проблема в том, что когда все запускается, сперва скрипт запускается, потом контент, поэтому он не видел скрипт, соответсвенно нужно скрипт внизу контента прописать, чтобы сперва контент прогружался потом скрипт.

Написано более трёх лет назад
Александр Rinte @verstkasanya2006 Автор вопроса

TAbrahamyan, Спасибо огромное за пояснение!!!

Написано более трёх лет назад

1 комментарий

Пригласить эксперта

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации

Похожие вопросы

JavaScript

+2 ещё

Средний
Как отсортировать в ХТМЛ по дате рождения от младшего к старшему, а так же, нумерацию их 1,2,3,4. Чтобы можно было потом добавить еще людей?
- 1 подписчик
- 5 часов назад
- 29 просмотров
1

ответ
JavaScript

+2 ещё

Простой
Почему шрифт в JS prompt() белого цвета?
- 1 подписчик
- 7 часов назад
- 40 просмотров
2

ответа
JavaScript

Простой
Выдает ошибку, сам файл не нулл(а ошибка выдается там где подключается жс), как исправить?
- 1 подписчик
- 9 часов назад
- 43 просмотра
0

ответов
JavaScript

+2 ещё

Простой
Пустая страница, ошибок нет. JS. В чем проблема?
- 1 подписчик
- 9 часов назад
- 153 просмотра
1

ответ
JavaScript

Простой
Какой фреймворк использовать для форм JS?
- 1 подписчик
- 9 часов назад
- 50 просмотров
0

ответов
JavaScript

Простой
Почему change срабатывает раньше чем click?
- 1 подписчик
- 10 часов назад
- 61 просмотр
1

ответ
JavaScript

Простой
Как получить metadata аудио на IOS?
- 1 подписчик
- 16 часов назад
- 21 просмотр
0

ответов
JavaScript

+2 ещё

Простой
Как отобразить массив из элементов?
- 1 подписчик
- вчера
- 100 просмотров
0

ответов
JavaScript

+1 ещё

Простой
Неизвестные скрипты на сайте (plupload и moxie). Для чего?
- 1 подписчик
- вчера
- 116 просмотров
1

ответ
JavaScript

+2 ещё

Простой
Как сделать так, чтобы звезда падала только при скролле страницы?
- 1 подписчик
- вчера
- 90 просмотров
0

ответов
Показать ещё Загружается…

JavaScript разработчик

summer • Ярославль

от 100 000 до 140 000 ₽

Junior JavaScript Developer

КРАФТТЕК • Санкт-Петербург

от 60 000 до 80 000 ₽

JavaScript разработчик

вАйТи

от 5 000 до 25 000 ₽

Привязка к Маркетплейсам 1С Розница 2.3

20 апр. 2024, в 05:26

10000 руб./за проект

Дописать функцию на Flutter, работа с yandex map kit

20 апр. 2024, в 04:18

3000 руб./за проект

Английская версия для сайта на WordPress

20 апр. 2024, в 03:34

8000 руб./за проект

Answer 1 · 2020-03-31 20:25:56

const input1 = document.querySelector('#input1');
const input2 = document.querySelector('#input2');
const button = document.querySelector('#button');

function check2() {
  if (input1.value != '' && input2.value != '') {
    button.disabled = false;
  } else {
    button.disabled = true;
  }
}

Answer 2 · 2020-03-31 20:26:53

Вроде всё правильно только
тут

else {
    	button.getAttribute('disabled', 'disabled');
    }

поменять на setAttribute, и значение не disabled, а disable. Если следуя оригиналу

Или так

function check2() {
	var el = document.querySelectorAll("#input1,#input2,#button");
    el[2].disabled = !el[0].value.trim()  ||  !el[1].value.trim();
}

Как написать такой же по функционалу код только на чистом JS?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт