Javascript: отключить кнопку выпадающего выбора

#javascript #html

#javascript #HTML

Вопрос:

У меня есть выпадающее меню с парой значений, которые ссылаются на функции. У меня также есть текстовое поле и кнопка отправки. В принципе, что я хочу сделать, так это если выбрано определенное значение в выпадающем списке, это отключает или скрывает кнопку отправки, и, возможно, текстовое поле становится пустым, и как только выбрано другое значение, оно снова включается.

Мой HTML-код:

 <body> 
    <p><label>Drawing tool: <select id="dtool"> 
        <option value="line">Line</option> 
        <option value="rect">Rectangle</option> 
        <option value="pencil">Pencil</option>
        <option value="eraser">Eraser</option> 

    </select></label></p>

//Некоторый код canvas

 <form id="frmColor">
        <input type='color' id='color' />
    </form>
        <input type='submit' value='Change Color' id="colorSubmit"/>

Javascript в связанном файле под названием canvas.js:

 ...
 tools.eraser = function () {
    var tool = this;
    this.started = false;
    var varPenColor = "White";
    context.strokeStyle = varPenColor;
    document.frmColor.colorSubmit.disabled=true;

В принципе, когда я выбираю ластик из выпадающего списка, все это работает, но кнопка отправки не отключается.

Я новичок в JS и не уверен, нужно ли мне добавить какой-то слушатель или получить идентификатор элемента, есть идеи?

Ответ №1:

У вас есть кнопка отправки вне формы. (как видно из примера кода ..)

 <form id="frmColor">
        <input type='color' id='color' />
    </form>
        <input type='submit' value='Change Color' id="colorSubmit"/>

должно быть

 <form id="frmColor">
    <input type='color' id='color' />
    <input type='submit' value='Change Color' id="colorSubmit"/>
</form>