Изменение значения элемента с помощью кнопки

Я пытаюсь отключить/включить строку ввода, нажав кнопку

Я могу вручную ввести слово «закрыто» в строке ввода, и оно работает нормально, но я не могу заставить «закрыто» войти с помощью кнопки

       var obj = document.getElementById("state");    
       obj.onchange = function(status){
         if (this.value= = "closed"){
            document.getElementById("test").disabled = 'disabled';

         }else{
            document.getElementById("test").disabled = '';
         }
       }

    <button id = "state" name = "state" type = "submit" value = "open">open</button>
    <button id = "state" name = "state" type = "submit" value = "closed">closed</button> 
    <input id = "test"/>

Строка ввода id=state работает нормально, но ничего не происходит, когда я нажимаю кнопки

у вас есть более одного элемента с одним и тем же идентификатором (то есть id = «состояние»). Вы должны вообще избегать этого конфликта.

— 30.04.2019 14:24

Есть две кнопки с одинаковыми идентификаторами. Обратите внимание, что атрибут ID элемента html уникален и не должен дублироваться, поэтому это даст неопределенный результат.

— 30.04.2019 14:25

Также, если вы поместите их в форму, страница будет перезагружена без preventDefault

— 30.04.2019 14:29

javascript html

30.04.2019 14:20

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

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

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

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

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

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

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

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

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

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

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

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

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

Ответы 3

Возможно, вы хотите переключатель?

window.addEventListener("load", function() {
  document.getElementById("state").addEventListener("click", function(e) {
    e.preventDefault(); // not really needed on type = "button"
    var closed = this.value == "closed";
    this.value = this.innerText = closed ? "open" : "closed";
    document.getElementById("test").disabled = closed;
  })
})

<button id = "state" name = "state" type = "button" value = "open">open</button>
<input id = "test" />

30.04.2019 14:37

Попробуйте что-то вроде этого,

var buttonClick = function(status) {
  if (status == "closed") {
    document.getElementById("test").disabled = true;
  } else {
    document.getElementById("test").disabled = false;
  }
}

<button id = "openState" name = "OpenState" type = "submit" value = "open" onclick = "buttonClick(value)">open</button>
<button id = "closedState" name = "ClosedState" type = "submit" value = "closed" onclick = "buttonClick(value)">closed</button>

<input id = "test" />

Меня поражает, что это действительно работает. Таким образом, встроенный обработчик фактически отправляет значение в вашей конструкции!!!

— 30.04.2019 14:42

30.04.2019 14:41

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

Есть несколько вещей, которые следует учитывать:

Нельзя использовать несколько раз одно и то же ID (состояние)
Кнопка будет реагировать не на onChange, а на onClick
Вы можете напрямую использовать HTML-атрибут onClick

function disableInput(disabled){
  document.getElementById("test").disabled = disabled
}

<button onClick = "disableInput(false)">open</button>
<button onClick = "disableInput(true)">closed</button>

<input id = "test" />

Да, вы можете, но это не рекомендуется. Что нового привносит этот ответ в вопрос?

— 30.04.2019 14:43

Это приносит радость, цветы и простое решение, которое работает, для ОП, который еще не находится на том уровне, когда он хочет услышать о ненавязчивом javascript.

— 30.04.2019 14:48

30.04.2019 14:42