Как написать такой же по функционалу код только на чистом 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

Средний
Как реализовать логику назад вперед?
- 1 подписчик
- 11 минут назад
- 9 просмотров
0

ответов
JavaScript

+2 ещё

Средний
Как подключить вконтакте на сайт чтобы слать юзеру в вк уведомления или сообщения?
- нет подписчиков
- 21 час назад
- 120 просмотров
1

ответ
JavaScript

+1 ещё

Сложный
Fastify долгая загрузка что можно сделать как найти причину?
- 1 подписчик
- вчера
- 50 просмотров
0

ответов
JavaScript

+2 ещё

Простой
Где можно увидеть реализацию такого эффекта при скролле?
- 1 подписчик
- вчера
- 171 просмотр
2

ответа
JavaScript

Простой
Fetch дает ошибку?
- 1 подписчик
- вчера
- 106 просмотров
1

ответ
JavaScript

Простой
Обьясните про функцию массив?
- 3 подписчика
- 23 нояб.
- 715 просмотров
1

ответ
JavaScript

+1 ещё

Простой
Почему JS не видит SVG-элементы по ID?
- 1 подписчик
- 22 нояб.
- 75 просмотров
1

ответ
JavaScript

Средний
Почему не срабатывает горячая клавиша в расширение?
- 1 подписчик
- 22 нояб.
- 44 просмотра
1

ответ
JavaScript

+1 ещё

Простой
Почему react-hook-form не отображает ошибки zod в определенных моментах?
- 1 подписчик
- 22 нояб.
- 35 просмотров
0

ответов
JavaScript

Простой
Почему перестало работать меню?
- 1 подписчик
- 20 нояб.
- 152 просмотра
1

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

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

Rocket • Смоленск

от 80 000 до 130 000 ₽

Fullstack разработчик JavaScript, php

Дорстрой-36 • Воронеж

от 100 000 до 200 000 ₽

JavaScript FullStack developer

Wanted. • Санкт-Петербург

До 220 000 ₽

Разработать бэкэнд на Node.js

25 нояб. 2024, в 18:39

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

Разработать бэкэнд на Django

25 нояб. 2024, в 18:35

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

Перенести сайт на CMS Wordpress c Tilda

25 нояб. 2024, в 18:33

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

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?

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

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

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