我试图在WordPress页面中插入一个小表单，该页面根据用户输入进行小计算并返回答案。最初，我尝试复制整个内容（HTML和JS（在<script> 标签），它可以很好地显示HTML表单，但尝试运行JS不起作用。
JS如下所示：
function calculateX(){
var inputA, inputB, total;
inputA = document.form.inputA.value;
inputB = document.form.inputB.value;
total = inputA + inputB * 10;
document.getElementById("result").innerHTML = parseInt(total);
}
HTML表单如下所示：
<form name="form">
InputA: <input type="text" name="inputA" /><br />
InputB: <input type="text" name="inputB" /><br />
<input type="button" value="Calculate" onclick="calculateX()" /><br />
Your result is: <b><span id="result"></span></b>
</form>
后来，我尝试创建一个插件，在将JS添加到
calculate.js 文件看起来是这样的：
<?php
/*
Plugin Name: Calculate
*/
function calculate() {
wp_register_script(\'calculate\', plugins_url(\'/js/calculate.js\'), __FILE__), array(\'jquery\'), false);
wp_enqueue_script(\'calculate\', plugins_url(\'/js/calculate.js\'), __FILE__);
}
add_action(\'wp_enqueue_scripts\', \'calculate\');
?>
然而，这两种解决方案都不起作用。我对JavaScript非常陌生，这是我第一次尝试自己在WordPress中实现这样的表单，所以我不完全确定它出了什么问题。
表单显示得非常好，但单击“计算”按钮时，它不会执行任何操作。
EDIT: See @RRikesh\' comments below on the process of fixing this. The code as it stands above works for me now.
SO网友:RRikesh
你有很多问题：
1。WordPress部分：
您的函数连接到
wp_enqueue_scripts 应该是这样的：
function wpse238953_calculate() {
wp_enqueue_script(\'calculate\', plugins_url(\'/js/calculate.js\'), __FILE__), array(\'jquery\'), false);
}
add_action(\'wp_enqueue_scripts\', \'wpse238953_calculate\');
请注意
wp_enqueue_scripts 和
wp_enqueue_script2。HTML/JS部分：让我们添加一些id 到两个输入字段，以便更容易将其定位
<form name="form">
InputA: <input type="text" id="inputA" name="inputA" /><br />
InputB: <input type="text" id="inputB" name="inputB" /><br />
<input type="button" id="calculate" value="Calculate" /><br />
Your result is: <b><span id="result"></span></b>
</form>
然后重写JS并使用一些jQuery（因为您将其添加为依赖项）：
jQuery(document).ready(function($){
\'use strict\';
$(\'#calculate\').mousedown(function(){
var valueA = parseFloat( $(\'#inputA\').val(), 10 ),
valueB = parseFloat( $(\'#inputB\').val(), 10 ),
total = ( valueA + valueB ) * 10;
$(\'#result\').text( total );
});
});
了解：
