.html格式文件测试js计算器正常，代码输入wordpress code editor后无法正常获取数值，如何解决？

最近要在wordpress网站上增加一个筒仓容量计算器的页面，将下图中的代码输入notepad++并保存为.html格式文件测试，正常。

img

img

再将这些代码粘贴到wordpress post后台code editor里，却无法正常显示计算结果。请问这个问题该如何解决？

img

下图是用F12查看的报错提示：

img

用 WordPress 插件来添加自定义 JavaScript 代码，将 JavaScript 代码放入单独的 .js 文件中，并在 HTML 文件中使用 script 标签引用该文件

没有什么报错提示么？

F12 看下

看生成的页面源码和你本地的一样吗，对比一下

该回答引用ChatGPT
根据问题描述，可能是wordpress的code editor不支持某些js语法或者代码格式错误导致无法正常计算结果。可能的解决方法包括：

1. 将代码拷贝到其他的.js文件中，并在wordpress页面中引用这个js文件。

2. 将代码中的所有标签改为HTML实体，例如将“<”改成“&lt;”，将“>”改成“&gt;”，防止HTML标签被解析而出现错误。

3. 检查代码中是否存在语法错误或者变量命名错误等，可通过浏览器F12打开开发工具，在控制台中查看报错信息。

以下是一份简单的js计算器代码，可以在wordpress中尝试使用或者参考：


<!DOCTYPE html>
<html>
<head>
	<title>JS Calculator</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

	<h2>JS Calculator</h2>

	<div>
		<label>First Number:</label>
		<input type="number" id="num1">
	</div>

	<div>
		<label>Second Number:</label>
		<input type="number" id="num2">
	</div>

	<div>
		<button onclick="add()">Add</button>
		<button onclick="subtract()">Subtract</button>
		<button onclick="multiply()">Multiply</button>
		<button onclick="divide()">Divide</button>
	</div>

	<div>
		<label>Result:</label>
		<input type="number" id="result" disabled>
	</div>

	<script>
		function add() {
			var num1 = document.getElementById("num1").value;
			var num2 = document.getElementById("num2").value;
			var result = parseInt(num1) + parseInt(num2);
			document.getElementById("result").value = result;
		}

		function subtract() {
			var num1 = document.getElementById("num1").value;
			var num2 = document.getElementById("num2").value;
			var result = parseInt(num1) - parseInt(num2);
			document.getElementById("result").value = result;
		}

		function multiply() {
			var num1 = document.getElementById("num1").value;
			var num2 = document.getElementById("num2").value;
			var result = parseInt(num1) * parseInt(num2);
			document.getElementById("result").value = result;
		}

		function divide() {
			var num1 = document.getElementById("num1").value;
			var num2 = document.getElementById("num2").value;
			var result = parseInt(num1) / parseInt(num2);
			document.getElementById("result").value = result;
		}
	</script>

</body>
</html>


注意：以上代码只作为参考，不一定适用于实际业务场景，请根据实际需求进行修改。

以下答案由GPT-3.5大模型与博主波罗歌共同编写：
这个问题可能是因为WordPress会自动过滤一些HTML标签和JS代码，导致无法正常获取数值。

有两种解决方法：

  1. 使用一个WordPress插件- Custom HTML Widget

Custom HTML Widget是一个WordPress插件，可以帮助你在WordPress上添加自定义HTML代码。你可以在WordPress后台搜索安装Custom HTML Widget插件，然后在编辑器中添加HTML标签和JS代码。

在这种情况下，你可以将上面的代码复制到Custom HTML Widget中，并在WordPress页面中呈现这个Widget。

  1. 修改WordPress过滤器

如果你不想安装插件，你也可以尝试修改WordPress的过滤器，使其不过滤你的代码。

打开functions.php文件，并添加以下代码：

function add_js_to_posts( $value ) {
  if ( ! is_admin() ) {
    global $allowedposttags;
    $allowedposttags['script'] = array(
      'src' => true,
      'type' => true,
      'language' => true,
      'defer' => true,
      'async' => true,
      'charset' => true,
    );
  }
  return $value;
}
add_filter( 'pre_kses', 'add_js_to_posts' );

这段代码将添加script标签作为允许标签，并在WordPress中使用JS代码时，不会被过滤掉。

请注意，修改WordPress过滤器可能会有安全风险，请仔细检查你的代码是否存在漏洞。
如果我的回答解决了您的问题，请采纳！