WordPress主题开发（单击按钮时不执行javascript代码）

我一直在学习如何使用php, html, css和javascript设计自定义Wordpress主题。进行更改时, 我正在使用Wordpress开发工具” 本地” 来查看我的网站。我是所有这些语言的初学者, 并且在导航中单击按钮时执行javascript函数时遇到问题。单击该按钮后, 应该显示一个滑出菜单。我不确定这是我的html和javascript语法是否存在问题, 或者我是否正确链接了它们(在html文件或functions.php文件中)。无论如何, 这是到目前为止我可能导致此问题的原因。
header.php

< head> < meta charset="UTF-8"> < meta name="viewport" content="width=device-width, initial-scale=1.0"> < meta http-equiv="X-UA-Compatible" content="ie=edge"> < ?php wp_head(); ?> < script src="http://www.srcmini.com/js/main.js"> < /script> < /head> < body> < div id ="slideout-menu"> < ul> < li> list items < /li> < /ul> < /div> < nav> < ul> < li> < a href ="http://www.srcmini.com/#"> Home< /a> < /li> < li> < a href ="http://www.srcmini.com/#"> About< /a> < /li> < li> < button onclick="showSlideOutMenu(); "> Projects< /button> < /li> < /ul> < /nav>

main.js

const slideoutMenu = document.getElementById("slideout-menu"); function showSlideOutMenu(){ if(slideoutMenu.style.opacity == "1"){ slideoutMenu.style.opacity = '0'; slideoutMenu.style.pointerEvents = 'none'; } else{ slideoutMenu.style.opacity = '1'; slideoutMenu.style.pointerEvents = 'auto'; } }

functions.php

< ?phpfunction js_css_setup(){ wp_enqueue_style('style', get_stylesheet_uri(), '/css/style.css'); wp_enqueue_script("main", get_theme_file_uri() .'/js/main.js', NULL, microtime(), false); }add_action('wp_enqueue_scripts', 'js_css_setup'); ?>

【WordPress主题开发（单击按钮时不执行javascript代码）】style.css可以正常工作, 并且在不透明度设置为1时显示菜单, 所以我排除了这种情况。如果添加到main.js, 我的网页也可以显示警报消息。还有其他可能导致问题的原因吗？
#1首先, 你应该在wp_enqueue_script函数中将in_footer参数设置为true
你的JS代码在页面完全加载之前运行, 并在浏览器控制台中导致错误
对于加载主要样式, 可以在wp_enqueue_style中使用get_stylesheet_uri()函数

< ?php function js_css_setup() { wp_enqueue_style( 'style', get_stylesheet_uri() ); wp_enqueue_script( "main-js", get_theme_file_uri() . '/js/main.js', null, microtime(), true ); }add_action( 'wp_enqueue_scripts', 'js_css_setup' );

const或let在ES6中, 你不能直接在浏览器中使用, 应该使用var。
https://tylermcginnis.com/var-let-const/
https://medium.com/javascript-scene/javascript-es6-var-let-or-const-ba58b8dcde75

var slideoutMenu = document.getElementById("slideout-menu"); function showSlideOutMenu() { console.log(slideoutMenu.style.opacity); if (slideoutMenu.style.opacity === "1") { slideoutMenu.style.opacity = '0'; slideoutMenu.style.pointerEvents = 'none'; } else { slideoutMenu.style.opacity = '1'; slideoutMenu.style.pointerEvents = 'auto'; } }

index.php

< html lang="en"> < head> < meta charset="UTF-8"> < meta name="viewport" content="width=device-width, initial-scale=1.0"> < meta http-equiv="X-UA-Compatible" content="ie=edge"> < ?php wp_head(); ?> < /head> < body> < ?php wp_body_open(); ?> < div id="slideout-menu"> < ul> < li> list items < /li> < /ul> < /div> < nav> < ul> < li> < a href="http://www.srcmini.com/#"> Home< /a> < /li> < li> < a href="http://www.srcmini.com/#"> About< /a> < /li> < li> < button onclick="showSlideOutMenu(); "> Projects< /button> < /li> < /ul> < /nav> < ?php wp_footer(); ?> < /body> < /html>

我建议先学习HTML和CSS, 然后再学习JS(ES5 / ES6)
#2将脚本更改为此