ページの背景が変更されずに.onclick ??

Question

ユーザーの入力に基づいてページの背景色を変更することはできません。私は人の名前と年齢を聞くためにHTMLでフォームを作った。私はインラインスクリプトを持っています（何らかの変更が有効になっているかどうかを確認したいからです）が、何も起こらないようです。私はこれが超基本的だと知っていますが、どんな助けも高く評価されます。

<form name="frmNameAge" id="frmNameAge" method="get" action=""> 

<table id="formTable"> 

<tr> 
    <td>Name:</td> 
    <td><input type="text" max="50" name="txtName" id="name" /> 

    </td> 
</tr> 

<tr> 
    <td>Age:</td> 
    <td><input type="text" max="10" name="txtAge" id="age" /></td> 

<tr> 
    <td colspan="2"><hr></td> 
</tr> 

<tr> 
    <td align="center" colspan="2"><input type="button" name="btnSubmit" value="Submit" id="button"></td> 
</tr> 

</table> 

</form>  

</div> 
<script> 

document.getElementById("button").onclick = function() { 
var strColor = prompt("Enter your favorite color."); 

} 

function changeBackgroundColor(strColor) { 
document.body.style.backgroundColor = strColor; 
} 



</script> 

Answer 1

あなたはそれをあなたがプロンプト

document.getElementById("button").onclick = function() { 
    var strColor = prompt("Enter your favorite color."); 
    changeBackgroundColor(strColor); 
} 

Answer 2

から受け取った値を渡されたことがないので、私はあなたの問題で始まると信じて、色を変更する関数を呼び出すために忘れてしまいました範囲。

問題を解決するには、変数var strColorをグローバルにするか、引き続き変数をプライベートにして、値をchangeBackgroundColor関数に渡します。

//global variable solution 

var strColor; 
document.getElementById("button").onclick = function() { 
    strColor = prompt("Enter your favorite color."); 
} 

function changeBackgroundColor(strColor) { 
document.body.style.backgroundColor = strColor; 
} 

//Private variable 

document.getElementById("button").onclick = function() { 
    var strColor = prompt("Enter your favorite color."); 
    changeBackgroundColor(strColor); 
} 

詳細を知りたい場合は、このチュートリアルを余暇にお読みください。

リンク - あなたのコードでhttp://www.w3schools.com/js/js_function_closures.asp

Answer 3

がプロンプト[OK]をクリックの上 "changeBackgroundColor" を呼び出していません。ここで

はフィドルです：https://jsfiddle.net/swaprks/1cL03mxb/

HTML：

<form name="frmNameAge" id="frmNameAge" method="get" action=""> 

<table id="formTable"> 

<tr> 
    <td>Name:</td> 
    <td><input type="text" max="50" name="txtName" id="name" /> 

    </td> 
</tr> 

<tr> 
    <td>Age:</td> 
    <td><input type="text" max="10" name="txtAge" id="age" /></td> 
    <tr> 
    <td colspan="2"><hr></td> 
</tr> 

<tr> 
    <td align="center" colspan="2"><input type="button" name="btnSubmit" value="Submit" id="button"></td> 
</tr> 

</table> 

</form>  

はJAVASCRIPT：

document.getElementById("button").onclick = function() { 
    var strColor = prompt("Enter your favorite color."); 
    if (strColor != null) { 
    changeBackgroundColor(strColor) 
    } 

} 

function changeBackgroundColor(strColor) { 
    document.body.style.background = strColor; 
}