スクリプトには、プログラムの HTML 側で編集できるようにしたい変数がいくつかあります。このようにして、プログラムに変更を加える必要がある場合、スクリプトをそのままにしておくことができ、HTML を介して変更を加えることができます。
HTMLで編集したい変数は次のとおりです。
var numberToComplete = 2;
var xAxis = 8;
var yAxis = 6;
var populationAmount = 2;
これを行う方法はありますか?
スクリプトには、プログラムの HTML 側で編集できるようにしたい変数がいくつかあります。このようにして、プログラムに変更を加える必要がある場合、スクリプトをそのままにしておくことができ、HTML を介して変更を加えることができます。
HTMLで編集したい変数は次のとおりです。
var numberToComplete = 2;
var xAxis = 8;
var yAxis = 6;
var populationAmount = 2;
これを行う方法はありますか?
HTML自体はそのようなことはできませんが、その仕事をするイベントハンドラーを持つことができます。
<label for=n>Number to complete:</label>
<input id=n value=3 onchange="numberToComplete = this.value">
正確にこれを行う方法は、コンテキストによって異なります。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Testing Variable Capturing</title>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script>
var numberToComplete = 0;
var xAxis = 0;
var yAxis = 0;
var populationAmount = 0;
function setValues() {
numberToComplete = $("#numberToComplete").val();
xAxis = $("#xAxis").val();
yAxis = $("#yAxis").val();
populationAmount = $("#populationAmount").val();
}
function getValues() {
$("#result").text("numberToComplete: " + numberToComplete + " | xAxis: " + xAxis + " | yAxis: " + yAxis + " | populationAmount: " + populationAmount);
}
</script>
</head>
<body>
numberToComplete : <input id="numberToComplete" type="text"/><br/>
xAxis: <input id="xAxis" type="text"/><br/>
yAxis: <input id="yAxis" type="text"/><br/>
populationAmount: <input id="populationAmount" type="text"/><br/>
<input type="button" onclick="setValues();" value="Set Values" />
<input type="button" onclick="getValues();" value="Get Values" /><br/>
<div id="result"></div>
</body>
</html>
上記のコードは、ユーザーが入力した値をキャプチャし、必要な変数に等しい値を設定する単純なフォームを示しています。この例では、jQuery参照を利用しています。
このようにして、htmlフォームから値を渡すことができ、スクリプトを変更する必要はありません。
<input type='text' id='numberToComplete'>
<input type='button' id='mybutton' value='mybutton'>
$("#mybutton").click(function(){
var numberToComplete = ($("#numberToComplete").val()=='')? 2:$("#numberToComplete").val() ;
var xAxis = 8;
var yAxis = 6;
var populationAmount = 2;
});
デモ </p>
eval
JavaScriptを実行して値を設定するために使用する関数を書くことができます