Почему я не могу отключить свою кнопку?

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

Вы пытаетесь отключить DIV под названием "storeButton", вместо отключения созданной вами кнопки, которая содержится внутри этого div. В вашем контексте простой способ сделать это, чтобы иметь публичный вар при создании кнопки, которая доступна, если вы хотите, чтобы отключить его:

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); 
}