Question

我已经开发了一个小型HTML文件，用于计算RPM和Pitch的变化（因为增加记录的RPM也会改变音高）。但是，在我的代码下面，当我按下“显示”按钮时，名为“输出”的“p”将不会重置。我究竟做错了什么？

当我反复按“显示”按钮而不在文本框中输入任何内容时，＆lt; p＆gt;当它应该只输出一次时，称为“输出”一遍又一遍地显示“一个或多个字段为空白”。

<!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 == ""))
    {
    	msg_aux = "<b>One or more fields is blank. </b>"; 
    }
    else if (isNaN(v_i) || isNaN(v_f) || isNaN(p_p))
    {
    	msg_aux = "<b>All inputs must be <i>numbers. </i></b>"; 
    }
	else
    {
    	if ((document.form1.yourname.value <= 0) || 
    		(document.form1.address.value <= 0))
        {
        	msg_aux = "<b>BPM must be positive. </b>"; 
        }
        else
        {
        	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; 
    		msg_aux = "<ul><li><b>Percent RPM Change: </b>" + d_rpm + 
    			"</li><li><b>Percent Pitch Change: </b>" + d_p + "</li>"; 
        }
    }
    message += msg_aux; 
    message += "</ul>"; 
    document.getElementById("Output").innerHTML = message; 
}

function clear()
{
	$("#Display").click(function() {
    	$("#Output").html("");
	}); 
}
</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">
	<p>
    	<b>Initial BPM:</b> <input TYPE="TEXT" SIZE="20" NAME="yourname" required />
	</p>
	<p>
    	<b>Final BPM:</b> <input TYPE="TEXT" SIZE="30" NAME="address" required />
	</p>
	<p>
    	<b>Pitch change (semitones): </b> <input TYPE="TEXT" SIZE="15" NAME="phone" required>
	</p>
	<p>
		<input type="button" value="Display" onClick="clear(); display();" />
		<input type="button" value="Clear" onClick="clear(); " />
	</p>
</form>
<p id="Output"></p>
</body>
</html>

Answer 1

你在clear函数中做的是说当有人点击#Display时，你应该清除#Output的内容。由于clear函数已分配给相关的点击事件，因此只需清除内容！

我认为你需要的是：

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

你的问题是，你不知道$("#Output").html("");位是在display()之前还是之后执行的......或者它是否被执行了！

我的意思是，在开始时你有一个链接到click事件的处理程序，它执行clear并显示。

第一次执行清除后，您将在显示屏上显示两个点击处理程序：一个执行清除并显示，另一个有效清除内容。但在第一次清除之后，您将有3个与click事件相关联的事件处理程序！每次执行清除时，都会添加另一个事件处理程序，我们不知道它们执行的顺序。

另外，检查显示功能的第6行 - 我认为这是一个错字。

Answer 2

变量message是全局变量。你永远不会清楚它。尝试在本地声明它，你应该没事。

此外，clear似乎不被接受为函数名称。这是一个有效的解决方案https://jsfiddle.net/oxw9t5pa/3/

的jsfiddle

HTML中的段落不会清楚

2 个答案: