2017-11-30 6 views
1

DJMのRPMとピッチの変化を計算する小さなHTMLファイルを作成しました(レコードのRPMを上げるとピッチも変わるので)。しかし、下の私のコードでは、 "表示"ボタンを押すと "出力"という名前の "p"がリセットされません。私は間違って何をしていますか?HTMLの段落は消去されません

テキストボックスに何も入力せずに「表示」ボタンを繰り返し押すと、「出力」と呼ばれる<p>に「1つ以上のフィールドが空白」というメッセージが繰り返し表示されます。あなたはクリア機能でやっている

<!DOCTYPE HTML> 
 

 
<html> 
 
<head> 
 
<title>Pitch and RPM Calculator</title> 
 
<script language="JavaScript" type="text/javascript"> 
 
var message = "<ul>"; 
 
var msg_aux = ""; 
 

 
function display() 
 
{ 
 
    var d_rpm = 0; 
 
    var d_p = 0; 
 
    var v_i = document.form1.yourname.value.replace(/\s/g, "").split(',').join('.'); 
 
    var v_f = document.form1.address.value.replace(/\s/g, "").split(',').join('.'); 
 
    var p_p = document.form1.phone.value.replace(/\s/g, "").split(',').join('.'); 
 
    document 
 
    
 
    if ((v_i == "") || (v_f == "") || (p_p == "")) 
 
    { 
 
    \t msg_aux = "<b>One or more fields is blank. </b>"; 
 
    } 
 
    else if (isNaN(v_i) || isNaN(v_f) || isNaN(p_p)) 
 
    { 
 
    \t msg_aux = "<b>All inputs must be <i>numbers. </i></b>"; 
 
    } 
 
\t else 
 
    { 
 
    \t if ((document.form1.yourname.value <= 0) || 
 
    \t \t (document.form1.address.value <= 0)) 
 
     { 
 
     \t msg_aux = "<b>BPM must be positive. </b>"; 
 
     } 
 
     else 
 
     { 
 
     \t d_rpm = Math.round(100000000 * (v_f/v_i - 1))/1000000; 
 
      d_p = Math.round(100000000 * (Math.pow(2, p_p/12) - v_f/v_i))/1000000; 
 
    \t \t msg_aux = "<ul><li><b>Percent RPM Change: </b>" + d_rpm + 
 
    \t \t \t "</li><li><b>Percent Pitch Change: </b>" + d_p + "</li>"; 
 
     } 
 
    } 
 
    message += msg_aux; 
 
    message += "</ul>"; 
 
    document.getElementById("Output").innerHTML = message; 
 
} 
 

 
function clear() 
 
{ 
 
\t $("#Display").click(function() { 
 
    \t $("#Output").html(""); 
 
\t }); 
 
} 
 
</script> 
 
</head> 
 
<body onload = "empty()"> 
 
<h1>Pitch Calculator</h1> 
 
Enter the following information. When you press the Display button, 
 
the data you entered will be displayed below. 
 
<form name="form1"> 
 
\t <p> 
 
    \t <b>Initial BPM:</b> <input TYPE="TEXT" SIZE="20" NAME="yourname" required /> 
 
\t </p> 
 
\t <p> 
 
    \t <b>Final BPM:</b> <input TYPE="TEXT" SIZE="30" NAME="address" required /> 
 
\t </p> 
 
\t <p> 
 
    \t <b>Pitch change (semitones): </b> <input TYPE="TEXT" SIZE="15" NAME="phone" required> 
 
\t </p> 
 
\t <p> 
 
\t \t <input type="button" value="Display" onClick="clear(); display();" /> 
 
\t \t <input type="button" value="Clear" onClick="clear(); " /> 
 
\t </p> 
 
</form> 
 
<p id="Output"></p> 
 
</body> 
 
</html>

+1

サイドノート:あなたは 'body 'の' onload'を呼び出す 'empty()'関数を定義したいかもしれません。 – Eyzi

+0

あなたのclear()には、実際には何もクリアしていません。また、関数の名前を変更する必要があります。なぜなら、私がそうしなければ関数は呼び出されないからです。私は 'クリア'は予約語だと思います。何度も繰り返されるメッセージに関しては、 'message'にテキストを追加し続けます。間にそれをクリアする必要があります。 –

+0

スクリプトタグのlanguage属性は推奨されていません。また、html5が出てきたので、type = "text/javascript"を削除できます。また、onClick in htmlを指定するときに$( "#Display")。click()でリスナーを設定する必要はありません。 –

答えて

1

、誰かが#Displayをクリックすると、あなたは#Outputの内容をクリアする必要があることを言っています。クリア機能は既に関連するクリックイベントに割り当てられているので、コンテンツをクリアするだけです! 、あなたに問題

function clear() 
{ 
    $("#Output").html(""); 
} 

$("#Output").html("");ビットはdisplay()の前または後に実行された場合は、見当がつかないよということです...またはそれはで実行されます場合:あなたは、私がこれだと思う必要なもの

すべて!

つまり、最初はクリックイベントにリンクされたハンドラがあり、クリアと表示が実行されます。

最初にクリアを実行すると、表示されている2つのクリックハンドラーがあります.1つはクリアと表示を実行し、もう1つはコンテンツを効果的に消去します。しかし、最初のクリア後、clickイベントに3つのイベントハンドラがリンクされます!そのクリアを実行するたびに、別のイベントハンドラを追加します。実行される順序はわかりません。

また、表示機能の6行目をチェックしてください。これは誤植だと思います。

-1

変数messageはグローバルです。あなたは決してそれをクリアしません。それをローカルで宣言しようとするとうまくいくはずです。

また、clearは、関数名として受け入れられていないようです。ここでは実用的な解決法があるjsfiddleがあります。https://jsfiddle.net/oxw9t5pa/3/

関連する問題