为什么我不能禁用我的按钮？

Question

几个小时以来，我一直在尝试禁用这个简短脚本中的简单 javascript 按钮 (id="storeButton")。我已经尝试了在互联网上找到的所有语法变体，但都无济于事。我正在 wordpress 页面中执行此操作。有人可以告诉我我的错误是什么吗？

wordpress 页面：

<p style="text-align: center;">Welcome!</p>
<strong>What is this project, and why contribute?</strong>

text

&nbsp;

<script src="/scripts/alert.js" type="text/javascript"></script>
<script src="/webcamjs/webcam.js" type="text/javascript"></script>
<script src="/scripts/take_snapshot.js" type="text/javascript"></script>

<div class="centre" id="my_camera" style="width:320px; height:240px;"></div>
<br>
<div id="freezeButton"></div>
<div id="storeButton"></div>
<br>
<div id="my_result"></div>

<script type="text/javascript">
<!--
ShowAlert();
webcamConfigure();
attach();
createFreezeButton();
disableBtn();
createStoreButton();
//-->
</script>

take_snapshot.js，问题似乎是

document.getElementById("storeButton").disabled = true;:

function webcamConfigure(){
    Webcam.set({
        width: 320,
        height: 240,
        dest_width: 640,
        dest_height: 480,
        image_format: 'jpeg',
        jpeg_quality: 100,
        force_flash: true
    });
}

function attach(){
    Webcam.attach( '#my_camera' );
}

function createStoreButton(){
    sendButton = document.createElement("input");
    sendButton.type = "button";
    sendButton.value = "Send snapshot!";
    sendButton.onclick = function store(){
        Webcam.snap( function(data_uri) {
            document.getElementById('my_result').innerHTML = '<img src="'+data_uri+'"/>';
        } );
    }
    placeHolder = document.getElementById("storeButton");
    placeHolder.appendChild(sendButton);
}

function disableBtn(){
    document.getElementById("storeButton").disabled = true;
}

function createFreezeButton(){
    myButton = document.createElement("input");
    myButton.type = "button";
    myButton.value = "Take snapshot!";
    myButton.onclick = function freeze(){
        if (myButton.value=="Take snapshot!") {
            myButton.value = "Discard snapshot!";
            Webcam.freeze();
            //document.getElementById("storeButton").disabled = false;
        }
        else {
            myButton.value = "Take snapshot!";
            Webcam.unfreeze();
            //document.getElementById("storeButton").disabled = true;
        }
    }
    placeHolder2 = document.getElementById("freezeButton");
    placeHolder2.appendChild(myButton);
}

Answer 1

您正在尝试禁用名为 "storeButton" 的 div，而不是禁用包含在 div 中的您创建的按钮。在您的上下文中，一种简单的方法是在创建按钮时使用 public var，当您要禁用它时可用：

var sendButton;
function webcamConfigure(){
    Webcam.set({
        width: 320,
        height: 240,
        dest_width: 640,
        dest_height: 480,
        image_format: 'jpeg',
        jpeg_quality: 100,
        force_flash: true
    });
}

function attach(){
    Webcam.attach( '#my_camera' );
}

function createStoreButton(){
    sendButton = document.createElement("input");
    sendButton.type = "button";
    sendButton.value = "Send snapshot!";
    sendButton.onclick = function store(){
        Webcam.snap( function(data_uri) {
            document.getElementById('my_result').innerHTML = '<img src="'+data_uri+'"/>';
        } );
    }
    placeHolder = document.getElementById("storeButton");
    placeHolder.appendChild(sendButton);
}

function disableBtn(){
    sendButton.disabled = true;
}

希望对您有所帮助，

:)大卫

Answer 2

好吧，有人暂时发布了一个被否决的答案，说我的按钮工作正常，但它缺少 css。这不是一个完全正确的答案，但他似乎有一些优点，因为这让我走上了正确的轨道。（如果您正在阅读这篇文章，亲爱的前回答者，请重新发布您的回答，我会赞成它！）。

我真的不知道我在做什么，在这里...而且我的代码结构肯定是对 JS 之神的亵渎，但它确实有效，所以这里是：

var sendButton;
var freezeButton;

function webcamConfigure(){
    Webcam.set({
        width: 320,
        height: 240,
        dest_width: 640,
        dest_height: 480,
        image_format: 'jpeg',
        jpeg_quality: 100,
        force_flash: true
    });
}

function attach(){
    Webcam.attach( '#my_camera' );
}

function createStoreButton(){
    sendButton = document.createElement("input");
    sendButton.type = "button";
    sendButton.value = "Send snapshot!";
    sendButton.disabled = true;
    sendButton.onclick = function store(){
        Webcam.snap( function(data_uri) {
            document.getElementById('my_result').innerHTML = '<img src="'+data_uri+'"/>';
        } );
        freezeButton.value = "Take snapshot!"
        sendButton.disabled = true;
    }
    placeHolder = document.getElementById("storeButton");
    placeHolder.appendChild(sendButton);
}

function createFreezeButton(){
    freezeButton = document.createElement("input");
    freezeButton.type = "button";
    freezeButton.value = "Take snapshot!";
    freezeButton.onclick = function freeze(){
        if (freezeButton.value=="Take snapshot!") {
            freezeButton.value = "Discard snapshot!";
            Webcam.freeze();
            sendButton.disabled = false;
        }
        else {
            freezeButton.value = "Take snapshot!";
            Webcam.unfreeze();
            sendButton.disabled = true;
        }
    }
    placeHolder2 = document.getElementById("freezeButton");
    placeHolder2.appendChild(freezeButton);
}

为什么我不能禁用我的按钮？

Why can't I disable my button?

javascript

wordpress

user-interface