0

私は JavaScript を初めて使用するので、これについて助けが必要です。フォームといくつかの JavaScript がありますが、間違った範囲が入力されたときの警告ボックスを追加するのに問題があります。アラート ボックスを表示したい 1 ～ 80 の範囲で、たとえば 81 のように入力します。

    <script type="text/javascript">
// hide from old browsers

if (top != self) {
     top.location = self.location.href
}

// end script hiding
</script>
<script type="text/javascript">
// hide from non scripting browsers

function chooseRandom(form) {

var m = parseInt(form.lower.value);

var n = parseInt(form.upper.value) - m;

var output = Math.round(Math.random() * n) + m;

form.result.value = output;

}
// Clears the form

function clearForm(form) {

    form.upper.value="";

    form.lower.value="";

    form.upper.focus();

    form.upper.select();

}
</script>
<script type="text/javascript">
// calculates range from 1 - 80
var browName = navigator.appName;
var SiteID = 1;
var ZoneID = 80;
var browDateTime = (new Date()).getTime();
</script>
4

2 に答える 2

2

それがあなたが探しているものであることを願っています:

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">
    function chooseRandom(form) {
    var m = parseInt(form.lower.value);
    var n = parseInt(form.upper.value) - m;
    var output = Math.round(Math.random() * n) + m;
    form.result.value = output;
    }
    function clearForm(formId) {
    var form = document.getElementById(formId);
    form.upper.value = "";
    form.lower.value = "";
    form.result.value = "";
    form.upper.focus();
    }
    function chooseResult(formId) {
    var form = document.getElementById(formId);
    var upperVal = parseInt(form.upper.value);
    var lowerVal = parseInt(form.lower.value);
    if(isNaN(lowerVal) || isNaN(upperVal) || (lowerVal < 1) || (upperVal > 80) || (lowerVal >= upperVal)) {
        alert("Value(s) out of range, must be 1 <= lower < upper <= 80");
        clearForm(formId);
    }
    else {
        //          alert("Values ok");
        chooseRandom(form);
    }
    }
</script>
</head>
<body>
<form id="form1" method="GET" action="">
    <p>Upper:</p><input id="upper" name="upper" type="number">
    <p>Lower:</p><input id="lower" name="lower" type="number">
    <p>Result:</p><input id="result" name="result" type="number">
    <button type="button" onclick="chooseResult('form1')">Choose result</button>
    <button type="button" onclick="clearForm('form1')">Clear form</button>
    <button type="submit">Submit form</button>
</form>
</body>
</html>
于 2013-04-19T14:19:14.477 に答える
0

イベント ハンドラーを入力にアタッチする必要があります。これは、jQuery のようなライブラリを使用する方がはるかに簡単です。調査することをお勧めします。ただし、これはjsソリューションです。基本的なコード フローは次のとおりです。

  1. いずれかの入力で変更を検出できるように、高レベルのイベント ハンドラーを取得します。
  2. イベントトリガーがチェックされ、要素に特定の検証クラスがあるかどうかを確認するとき
  3. すべての値が許容可能であることを確認してください。そうでない場合、ユーザーに警告します。

http://jsfiddle.net/B6E4s/

if (document.body.addEventListener) {
    document.body.addEventListener('change', validate, false);
} else {
    document.body.attachEvent('change', validate); //for IE
}

function validate(e) {
    e = e || window.event;
    var target = e.target || e.srcElement;
    if (target.className.match(/validateThis/)) {
        var lowerBoundVal = document.getElementById('lowerBound').value;
        var upperBoundVal = document.getElementById('upperBound').value;
        if (lowerBoundVal < 0) {
            alert('Enter # greater than 0');
        }
        if (upperBoundVal > 80) {
            alert('Enter # less than 81');
        }
    }
}
于 2013-04-19T14:14:34.703 に答える