Javascript Newb's Uncaught ReferenceError：変数が定義されていません

Question

私の最初のjavascriptプロジェクトとして木工の電卓のためのベビーステップがあります。私は私の問題は、順序がに要素を配置するために何だと思う私が持っている：。

A数字のみを取る）、フォーム、

B）Aこれらの数字を逆流する送信ボタンを、

C）2フォームに入力された数値に基づいて計算されるはずのプロパティを持つオブジェクト。

ブラウザがオブジェクトのプロパティを見つけることができないのはなぜですか？私はページの一番上、最後、そしてその間にいくつかの場所を置いた。現在、使用されている変数はすべて、送信ボタンによって読み取られた後、将来の送信ボタンの式で使用される前に表示されます。

私はオブジェクトまで作成しました。私は実際にそれらを使う必要はないと思うが、私はチュートリアルで学んだことを使い始めることが良い方法だと思った。

JSFiddleが動作する送信ボタン用のPOSTを（私はPHPを意味だと思う）使用したいが、私が見て、それを持っているようだ：https://jsfiddle.net/WarOnGravity/26nnzy6e/1/

'use strict'; 

window.onload = function() { 

document.getElementById("configForm").addEventListener("submit", barfulateTotal); 


function barfulateTotal(barf) { 
    barf.preventDefault(); 

    console.log("You got barf!"); 

    console.log("Ceiling Height : " + inputCeilingHeight.value + "mm" + "/" + ((inputCeilingHeight.value/25.4).toFixed(3)) + "in"); 
     document.getElementById('outputCeilingHeight').innerHTML = ("Ceiling Height : " + inputCeilingHeight.value + "mm" + "/" + ((inputCeilingHeight.value/25.4).toFixed(3)) + "in"); 

    console.log("Soffit Height:" + inputSoffitHeight.value + "mm" + "/" + ((inputSoffitHeight.value/25.4).toFixed(3)) + "in"); 
     document.getElementById('outputSoffitHeight').innerHTML = ("Soffit Height : " + inputSoffitHeight.value + "mm" + "/" + ((inputSoffitHeight.value/25.4).toFixed(3)) + "in"); 



    console.log("Countertop Clearance : " + inputCtopClearance.value + "mm" + "/" + ((inputCtopClearance.value/25.4).toFixed(3)) + "in"); 
     document.getElementById('outputCtopClearance').innerHTML = ("Countertop Clearance : " + inputCtopClearance.value + "mm" + "/" + ((inputCtopClearance.value/25.4).toFixed(3)) + "in"); 


    console.log("Countertop Thickness : " + inputCtopThickness.value + "mm" + "/" + ((inputCtopThickness.value/25.4).toFixed(3)) + "in"); 
     document.getElementById('outputCtopThickness').innerHTML = ("Countertop Thickness : " + inputCtopThickness.value + "mm" + "/" + ((inputCtopThickness.value/25.4).toFixed(3)) + "in"); 


    console.log("Countertop Elevation : " + inputCtopElevation.value + "mm" + "/" + ((inputCtopElevation.value/25.4).toFixed(3)) + "in"); 
     document.getElementById('outputCtopElevation').innerHTML = ("Countertop Elevation : " + inputCtopElevation.value + "mm" + "/" + ((inputCtopElevation.value/25.4).toFixed(3)) + "in"); 




    console.log("Toekick Height : " + inputToekickHeight.value + "mm" + "/" + ((inputToekickHeight.value/25.4).toFixed(3)) + "in"); 
     document.getElementById('outputToekickHeight').innerHTML =("Toekick Height : " + inputToekickHeight.value + "mm" + "/" + ((inputToekickHeight.value/25.4).toFixed(3)) + "in"); 

    //Top Reveal 
    console.log("Top Face Reveal : " + inputRevealTop.value + "mm" + "/" + ((inputRevealTop.value/25.4).toFixed(3)) + "in"); 
     document.getElementById('outputRevealTop').innerHTML =("Top Face Reveal : " + inputRevealTop.value + "mm" + "/" + ((inputRevealTop.value/25.4).toFixed(3)) + "in"); 

    //Middle Reveal 
    console.log("Middle Face Reveal : " + inputRevealMiddle.value + "mm" + "/" + ((inputRevealMiddle.value/25.4).toFixed(3)) + "in"); 
     document.getElementById('outputRevealMiddle').innerHTML =("Middle Face Reveal : " + inputRevealMiddle.value + "mm" + "/" + ((inputRevealMiddle.value/25.4).toFixed(3)) + "in"); 

    //Bottom Reveal 
    console.log("Bottom Face Reveal : " + inputRevealBottom.value + "mm" + "/" + ((inputRevealBottom.value/25.4).toFixed(3)) + "in"); 
     document.getElementById('outputRevealBottom').innerHTML =("Bottom Face Reveal : " + inputRevealBottom.value + "mm" + "/" + ((inputRevealBottom.value/25.4).toFixed(3)) + "in"); 




    var boxUpper = { 
     height : inputUpperHeight.value, 
     topReveal : inputRevealTop.value, 
     midReveal : inputRevealMiddle.value, 
     botReveal : inputRevealBottom.value, 
     face1  : inputUpperHeight.value - (inputRevealTop.value + inputRevealBottom.value) 
    } 

    var boxBase = { 
     height : inputBaseHeight.value, 
     topReveal : inputRevealTop.value, 
     midReveal : inputRevealMiddle.value, 
     botReveal : inputRevealBottom.value, 
     toekick : inputToekickHeight.value, 
     face1  : inputBaseHeight.value - (inputToekickHeight.value + inputRevealTop.value + inputRevealBottom.value) 
    } 


    console.log("Upper Height:" + inputUpperHeight.value + "mm" + "/" + ((inputUpperHeight.value/25.4).toFixed(3)) + "in"); 
     document.getElementById('outputUpperHeight').innerHTML =("Upper Height : " + inputUpperHeight.value + "mm" + "/" + ((inputUpperHeight.value/25.4).toFixed(3)) + "in"); 


    console.log("Upper Face 1 Height:" + boxUpper.face1 + "mm" + "/" + ((boxUpper.face1/25.4).toFixed(3)) + "in"); 
     document.getElementById('outputUpperFace1').innerHTML =("Upper Face 1 Height : " + boxUpper.face1 + "mm" + "/" + ((boxUpper.face1/25.4).toFixed(3)) + "in"); 


    //Base 



    console.log("Base Height:" + inputBaseHeight.value + "mm" + "/" + ((inputBaseHeight.value/25.4).toFixed(3)) + "in"); 
     document.getElementById('outputBaseHeight').innerHTML =("Base Height : " + inputBaseHeight.value + "mm" + "/" + ((inputBaseHeight.value/25.4).toFixed(3)) + "in"); 




    console.log("Base Face 1 Height:" + boxBase.face1 + "mm" + "/" + ((boxBase.face1/25.4).toFixed(3)) + "in"); 
     document.getElementById('outputBaseFace1').innerHTML =("Base Face 1 Height : " + boxBase.face1 + "mm" + "/" + ((boxBase.face1/25.4).toFixed(3)) + "in"); 


} //function barfulateTotal(event) 


} 

私はベースの「onloadイベント」機能を追加しました送信ボタンが機能していなかったので、私がここで読んだいくつかのこと。私は、Bracketのバグログに非常に多くの不自然なエラーが残っています。私は何が間違っているのか推測できません。コンソール、ウィンドウ、およびすべての単一のHTML IDが定義される前に定義されていない、または使用されていることを教え続けているのはなぜですか？

私はこれが、シンプルに始まる便利で便利な電卓プロジェクトだと思いました。どんな援助も感謝しています、私はちょうど勉強する方向についてアドバイスを探しています。

トムG.

Answer 1

おはようございます。

名前付きの関数ハンドラをボタンのonclickにアタッチしようとしています。しかし、あなたは別の関数の中で関数を定義しています。関数をグローバルスコープに移動します（つまり、匿名の内部にネストされていません）。window.onload = function() {} JSFiddleで問題が発生するでしょう。あなたは窓window.barfulateTotal = barfulateTotalに機能を添付して、一般的に提出するサーバーにアクセスしてください上の<form id="configForm" onsubmit="return window.barfulateTotal(event)">

JSFiddle seems to wants to use POST (I think that means PHP) for the submit button to work

フォームでフォームにバインドすることができるように、彼らはグローバルになりますように見える機能はまだ。アレント。あなたがしたい場合そのような振る舞いを防ぐために、簡単な方法の1つは、submitでtrueまたはfalseを返すようにフォームを変更することです。ここではイベントハンドラの最後にfalseを返すようにします。

だからここに更新jsfiddleです：あなたがわかるようにhttps://jsfiddle.net/nmu66esm/1/

、私はjsfiddleはすでにonloadイベントで実行されるため、オンロードのうちにすべてを移動し、HTMLでのonSubmitハンドラを提出からフォームを防止し、与えましたフォームのsubmitではなくsubmitボタンのclickにイベントをバインドする