Question

我有一个下拉菜单，其中包含一些链接到函数的值。我还有一个文本框和提交按钮。基本上我想要做的是如果选中下拉框中的某个值，它会禁用或隐藏提交按钮，并且可能使文本框变为空白，一旦选择了另一个值，它就会重新打开。

我的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>

//一些画布代码

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

一个名为canvas.js的链接文件中的Javascript：

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

基本上，当我从下拉列表中选择橡皮擦时，一切正常，但提交按钮不会禁用。

我是JS的新手并不确定我是否需要添加某种监听器或获取元素ID的任何想法？

Answer 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>

Javascript：下拉选择时禁用按钮

1 个答案: