javascript - HTML 中的段落将不清晰

标签 javascript jquery html

我编写了一个小型 HTML 文件,用于计算 DJ 的 RPM 和音高的变化(因为增加唱片的 RPM 也会改变音高)。但是,在我下面的代码中,当我按下“显示”按钮时,名为“输出”的“p”不会重置。我究竟做错了什么?

当我重复按“显示”按钮而不在文本框中输入任何内容时,名为“输出”的

一遍又一遍地显示“一个或多个字段为空白”,而它应该只输出一次。

<!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>

最佳答案

您在清除功能中所做的事情是说,当有人单击#Display 时,您应该清除#Output 的内容。由于相关的点击事件已经分配了清除功能,所以只需清除内容即可!

我认为你需要的是这样的:

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

你的问题是,你不知道 $("#Output").html(""); 位是在 display( )...或者如果它被执行了!

我的意思是,一开始您有一个链接到单击事件的处理程序,该处理程序执行清除并显示。

第一次执行清除后,就会显示两个单击处理程序:一个执行清除并显示,另一个有效清除内容。但在第一次清除之后,您将有 3 个事件处理程序链接到单击事件!每次执行清除操作时,都会添加另一个事件处理程序,并且我们不知道它们的执行顺序。

另外,检查显示函数的第 6 行 - 我认为这是一个拼写错误。

关于javascript - HTML 中的段落将不清晰,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47578993/

相关文章:

javascript - JavaScript 如何创建与 DOM 元素的单向数据绑定(bind)?

javascript - 父窗口关闭时关闭子窗口(弹出窗口)

javascript - 使用 jQuery 比较 2 个输入字段的值

javascript - 当类型值相等时如何禁用字段

javascript - 使用 Restangular 并尝试将多个参数设置为 $scope 中的 var

javascript - jquery 从数组中删除最后 2 个零

javascript - jqueryui对话框使屏幕变灰

html - 样式内部 reCaptcha DIV?

javascript - 清除文本 onclick - 文本字段

Python - Beautiful Soup - 删除标签