Wordpress使用javascript更改iframe-src

Question

我正试图在使用模板php文件的Wordpress页面上实现javascript。但是onlcick并没有改变src，并且在浏览器调试控制台中；未捕获类型错误：无法设置null的属性"src">

我已经将下面的Javascript代码添加到一个.js文件中

videoFrame = document.getElementById('video');
function setLanguage(lang) {
switch(lang) {
case 'en':
videoFrame.src = 'https://player.vimeo.com/video/1';
break;
case 'fr':
videoFrame.src = 'https://player.vimeo.com/video/2';
break;
} 
}

然后，我将入队添加到functions.php文件中

add_action('wp_enqueue_scripts' ,'translate_script');
function translate_script(){wp_enqueue_script('translate', get_stylesheet_directory_uri().'/js/translate.js');}

最后，我在template.php文件中添加了按钮的代码

<button onclick="setLanguage('en')"></button>
<button onclick="setLanguage('fr')"></button>

任何帮助或建议都将不胜感激，因为我可以让代码在CodePen中工作，但不能在wordpress环境中工作。感谢

Answer 1

问题是您试图在加载整个页面之前获取videoFrame。你可以通过将代码放在文档中来解决这个问题。ready或访问函数中的视频，这样它就可以在点击按钮时搜索它(并且整个网站已经加载(

function setLanguage(lang) {
videoFrame = document.getElementById('video');
switch(lang) {
case 'en':
videoFrame.src = 'https://player.vimeo.com/video/1';
break;
case 'fr':
videoFrame.src = 'https://player.vimeo.com/video/2';
break;
} 
}