JavaScript – ReferenceError: Variable is not defined

Hi,

I’m using this Theme.

I embedded a video in that top edge-to-edge headerbox. The video is on autostart and now I want to add a custom mute button for it. So since I’m far from being a JS-genius, I got myself some code from the web and created a plugin, which looks like this:

<?php
/*
Plugin Name: LaLi Mute Button
Plugin URI:
Description: Adds a mute button to the main page
Version: 1.1
Author: Treppenmanni
Author URI:
License:
*/

function lali_mute_button() {

	wp_register_script( 'lali_mutebutton', get_template_directory_uri() . '/js/mutebutton.js">', '', null,''  );

	if ( is_front_page() ) {
		wp_enqueue_script( 'lali_mutebutton' );
	}
}

add_action( 'wp_enqueue_scripts', 'lali_mute_button' );
?>

The JS-file:

// Connecting vars
window.onload = function() {

  // Video
  var video = document.getElementById("video");

  // Buttons
  var mutebutton = document.getElementById("mute");

}

// Event listener for the mute button

mutebutton.addEventListener("click", function() {
  if (video.muted == false) {
    // Mute the video
    video.muted = true;

    // Update the button text
    muteButton.innerHTML = "Unmute";
  } else {
    // Unmute the video
    video.muted = false;

    // Update the button text
    mutebutton.innerHTML = "Mute";
  }
});

HTML on the Main site:

<div id="video-container">
  <!-- Video -->
  <video name "reel" id="video" width="100%">
   <source src="video/Showreel.iphone.mp4"  type="video/mp4; codecs=avc1.42E01E,mp4a.40.2">
  <source src="video/Showreel.webmsd.webm" type="video/webm; codecs=vp8,vorbis">
  <source src="video/Showreel.oggtheora.ogv"  type="video/ogg; codecs=theora,vorbis">
  </video>
  <!-- Video Controls -->
  <div id="video-controls">
    <button type="button" id="mute">Mute</button>
  </div>
</div>

Before that, I stumbled over this register-enqueue-thing and managed to get it running (took it’s time). The Plugin loads the script, the getElementByIds give back the correct values, but the button does nothing. Firebug gives me an error message: ReferenceError: mutebutton is not defined. Seems as if the value of the variable instantly gets forgotten after defining. Appreciate the help.

Treppenmanfred