1

だから私はこの簡単な作業をしましたが、なぜこれがうまくいかないのですか? 同じ人がそれを見て教えてくれますか? 問題は、ボタンが機能を呼び出さないことですが、なぜですか? 

<html>
<head>
    <title>Task count</title>
    <script>
        var over21 = 6.19;
        var under21 = 5.19;

        // Getting data from a user connecting variables with textboxes by ID
        var age = document.getElementById('age');
        var hours = document.getElementById('hours');

        // function wich does all of the calculation
        function magic(){    
            //cheking if he is under or over 21 
            if(age < 21){
                alert("You will make " + (age*under21));
            }else{
                alert("You will make " + (age*over21));                            
            };
        };

        // function that does everything and is connected to the button
        function myFunction(){
            // Validation checking that entered number is not more than 150 
            // And also if age is correct
            if((hours < 150 && hours > 0) && (age < 150 && age > 12)){
                magic();
            }else{
                alert("Wrong!");
            };
        };
  </script>
</head>
<body>
    <label>Enter your age.(12-150)</label>
    <input type="text" class="textBox" id="age"><br>
    <label>Enter how long will you work.(1-150)</label>
    <input type="text" class="textBox" id="hours"><br>
    <button onclick="myFunction()" >How much will i make ?</button>
</body>
</html>​
4

5 に答える 5

4 
var age = document.getElementById('age').value;
var hours = document.getElementById('hours').value;

含まれている「値」ではなく、HTML要素オブジェクトを取得していました。

于 2012-10-22T19:46:52.030 に答える
1

あまり多くのグローバル変数を使用しないことをお勧めします。

動く：

var age = document.getElementById('age');
var hours = document.getElementById('hours');

にmyFunction()。

次に、これら 2 つを作成する必要があります。

var age = parseInt(document.getElementById('age').value);
var hours = parseInt(document.getElementById('hours').value);

parseInt値を文字列として取得し、整数値に変換するために使用します。

ageとhoursは で定義されているため、 に渡す必要がmyFunctionあります。agemagic()

    var over21 = 6.19;
    var under21 = 5.19;

    // function wich does all of the calculation
    function magic(age){

      //cheking if he is under or over 21 
       if(age < 21){
             alert("You will make " + (age*under21));
       }else{
             alert("You will make " + (age*over21));                            
       };
    };
    // function that does everything and is connected to the button
    function myFunction(){

    var age = parseInt(document.getElementById('age').value);
    var hours = parseInt(document.getElementById('hours').value);
     // Validation checking that entered number is not more than 150 // And also if age is correct
     console.log(age + " : " + hours)   
        if((hours < 150 && hours > 0) && (age < 150 && age > 12)){
           magic(age);
        }else{
            alert("Wrong!");
        };
    };

また、(1-150) が必要な場合は、次のifステートメントを変更する必要があります。

if((hours < 150 && hours > 0) && (age < 150 && age > 12)){ ... }

に：

if((hours <= 150 && hours > 0) && (age <= 150 && age > 12)){ ... }

最後に、関数の計算が間違っている可能性があると思いmagic()ます:

function magic(age, hours){

  //cheking if he is under or over 21 
   if(age < 21){
         alert("You will make " + (hours*under21));
   }else{
         alert("You will make " + (hours*over21));                            
   };
};

私はあなたが望んhours*under21でいたと信じていますhours*over21. hoursもパラメータとして渡されていることに注意してください。

例

于 2012-10-22T19:55:50.743 に答える
0

年齢変数と時間変数を設定するコードは 1 回だけ実行されるため、これらのテキスト ボックスの空/既定値になります。関数のスコープ外で宣言する必要がありますが、「myFunction」関数内で再設定してください。または、「myFunction」関数でのみ宣言/設定し、「magic」関数にパラメーターとして渡すこともできます。最終的に、スクリプトは次のようになります。

<html>
<head>
    <title>Task count</title>
    <script>
        var over21 = 6.19;
        var under21 = 5.19;

        // function wich does all of the calculation
        function magic(age, hours){    
            //cheking if he is under or over 21 
            if(age < 21){
                alert("You will make " + (age*under21));
            }else{
                alert("You will make " + (age*over21));                            
            };
        };

        // function that does everything and is connected to the button
        function myFunction(){
            // Getting data from a user connecting variables with textboxes by ID
            var age = document.getElementById('age').value;
            var hours = document.getElementById('hours').value;

            // Validation checking that entered number is not more than 150 
            // And also if age is correct
            if((hours < 150 && hours > 0) && (age < 150 && age > 12)){
                magic(age, hours);
            }else{
                alert("Wrong!");
            };
        };
  </script>
</head>
<body>
    <label>Enter your age.(12-150)</label>
    <input type="text" class="textBox" id="age"><br>
    <label>Enter how long will you work.(1-150)</label>
    <input type="text" class="textBox" id="hours"><br>
    <button onclick="myFunction()" >How much will i make ?</button>
</body>
</html>​

追加の注意として、年齢に21歳未満または21歳以上を掛けています. 代わりに、時間に21歳未満または21歳以上を掛けたいと確信しています。

于 2012-10-22T20:02:12.417 に答える
0

それがコードの場合、3 つのエラーを見つけることができます。

  1. ロードされる前に dom にアクセスしていて、必要なときに変数を割り当てようとするのは 1 回だけです。
  2. 変数に値ではなく dom オブジェクトを割り当てている場合は、getElementById("mycoolid").value を使用します。
  3. タイプをボタン要素に割り当てていないため、ブラウザが異なると、この属性に異なるデフォルトが割り当てられます。
于 2012-10-22T19:58:46.677 に答える
0

呼び出しは、getElementById取得しようとしている要素が存在する前に実行されています。

それらを関数内に移動するか<script>、<body>.

次に、値自体にアクセスするには、 と を使用age.valueしhours.valueます。また、それらが数値であることを確認するためにそれらを実行する必要parseInt(...,10)があります。

于 2012-10-22T19:47:37.827 に答える