Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

Playing Audio Using Keystrokes: Is It Possible?

Annabelle5893

Gold Coder
I'm wondering, how would I make an app that plays audio files using the keys on the number pad? Specifically, I want to make an app that triggers "Rotary Pulse 1" by pressing 1 on the numeric keypad, all the way up to "Rotary Pulse 0" on the 0 key. A dial tone will be toggled on by pressing the spacebar, which will begin with a "receiver pickup" noise. The dial tone turns off when digits are dialed via the numeric keypad. If you press the spacebar either when the dial tone is on, or after dialing a number, a "Receiver Hang Up" noise will be triggered. With the rotary dial sounds, the dial turning to the fingerhole is triggered at key down, and the release of the dial returning to the resting position will be triggered by releasing of the number corresponding to the fingerhole (1, 2, 3, 4, 5, 6, 7, 8, 9, 0). This will be accompanied by the internal sound of the dial pulses as heard in a telephone. What is the code I would use to make this audio app using HTML?
 
Sure thing! Here ya go.
Code:
//grab the button 'hookSwitch'
var hookSwitch = document.querySelector('button.hookSwitch');

//create an event listener for a click event
hookStatus.addEventListener("onclick", function(){
    //inside of the callback function for click event listener, add the on/off classes to the span like this:
    //grab the span element
    var hookStatus = document.querySelector('span.hookStatus');

    //grab check the current status class "on/off", if "on", remove and add "off", otherwise do the same if "on"
    if ( hookStatus.classlist.contains('off') ){
        //remove 'off' class
        hookStatus.classlist.remove('off');  
        //add 'on' class
        hookStatus.classlist.add('on');
        //change span text
        hookStatus.textContent = "Off Hook";  
    }
    else {
        if ( hookStatus.classlist.contains('on') ){
            //remove 'on' class
            hookStatus.classlist.remove('on');  
            //add 'off' class
            hookStatus.classlist.add('off');
            //change span text
            hookStatus.textContent = "Off Hook";
        }
    }
});
var dialTone=new Audio('file:///M:/Documents/Virtual%20Phone/Call%20Progress%20Tones/Dial%20Tone/USA%20Dial%20Tone.ogg');
var isOffHook=false;
var callIncoming=false;
var allowDial = true;
var ringingTone=new Audio('Ringing Tone/Princess%20702B%20Bell%20Ring.ogg');
var timesRung=0;
var availableNumbers=["0","611","711","811","911","*67 + 1 (847) 765-1008","1 (847) 765-1008","867-5309",
                        "1 (212) 456-1414","555-1212","555-5555","748-0900","650-0050","650-8950",
                        "970-3920","1 (714) 733-9969","*57","*69"];


function reload(){
    location.reload(true);
}

document.getElementById('toggleLineStatus').onclick=function(){
    toggleLineStatus()
};

function toggleLineStatus() {
    var number="";
    var pin="";
    var checkForPin=false;
    document.getElementById('numberbeingdialed').innerHTML=number;
    var wasOnHook=false;

    if(!offHook){
        offHook=true;
        document.getElementById('hookstatus').innerHTML="Off";
        wasOnHook=true;
    } else {
        offHook=false;
        document.getElementById('hookstatus').innerHTML="On";
        clunk.pause();
        ringback.pause();
        clunk.currentTime=0;
        ringback.currentTime=0;
    }
 
    if(ringbackDialed){
        startRingback();
    } else {
        if(wasOnHook){
            ring.pause();
            ring.currentTime=0;
            playDialTone();
            dialingAllowed=true;
            nextDigitDialable=true;
            ringbackDialed=false;
            keepPlaying=true;
        }
        else {
            stopDialTone();
            setOpacity(100);
            allCircuitsBusy=false;
            keepPlaying=false;
        }
    }
}

function numberSuggestion(){
    var randomNumber=Math.floor(Math.random()*(availableNumbers.length));
    var suggestedNumber=availableNumbers[randomNumber];
    document.getElementById("suggestion").innerHTML="How about dialing <strong id='suggestedTelephoneNumber'>"+
                                                    suggestedNumber+
                                                    "</strong>? Don't like this number? Click the button above again!";
}

function receiverRaised(){
    if(allowDial == false) {
        telephoneAnswered()
    }
 
    if(allowDial == true) {
        dialTone.play();
    } else {
        offHook ();
        timeoutHowler.play();
    }
}

setCallTimeout();

function setCallTimeout(){
    var delay=5000;
    var delayCaller=Math.floor((Math.random()*8000)+1);
    delay=delay+delayCaller;
    setTimeout(incomingCall,delay);
}

function offHook(){
    isOffHook=true;
    document.getElementById("WE2500").style.display="none";
    document.getElementById("dialPad").style.display="block";
}

function dialToneTimedOut() {
    allowDial=false;
    timeoutHowler();
    if(DialToneTimedOut == true) {
        timeoutHowler.play();
        timeoutHowler.currentTime=0;
    }
}

function incomingCall(){
    var ringRing=new Audio('Ringing Tone/Princess%20702B%20Bell%20Ring.ogg');
    var hasTelephoneBeenAnswered=false;
    ringTelephone();
}

function ringTelephone(){
    if(!hasTelephoneBeenAnswered == false) {
        ringRing.play();
        ringRing.currentTime=0;
    }
 
    if(isOffHook == false) {
        ringRing.play();
    }
 
    if(allowDial == false) {
        callIncoming=true;
        setInterval(ringTelephone,5500);
    }
}

var number="";
var timeout="";

function numberDial() {
    if(dialTone){
        dialTone.pause();
        dialTone.currentTime=0
    }
}

function dial1() {
    if(allowDial == true) {
        numberDial();
        number=number+"1";
        var DTMFToneDial1=new Audio('file:///M:/Documents/Virtual%20Phone/DTMF%20Tone%20Dials/DTMF%20Tone%20Dial%201.ogg');
        DTMFToneDial1.play();
    }
}

function dial2() {
    if(allowDial == true); {
        numberDial();
        number=number+"2";
        var DTMFToneDial2=new Audio('file:///M:/Documents/Virtual%20Phone/DTMF%20Tone%20Dials/DTMF%20Tone%20Dial%202.ogg');
        DTMFToneDial2.play();
    }
}

function dial3() {
    if(allowDial == true); {
        numberDial();
        number=number+"3";
        var DTMFToneDial3=new Audio('file:///M:/Documents/Virtual%20Phone/DTMF%20Tone%20Dials/DTMF Tone Dial 3.ogg');
        DTMFToneDial3.play();
    }
}

function dial4() {
    if(allowDial == true) {
        numberDial();
        number=number+"4";
        var DTMFToneDial4=new Audio('file:///M:/Documents/Virtual%20Phone/DTMF%20Tone%20Dials/DTMF Tone Dial 4.ogg');
        DTMFToneDial4.play();
    }
}

function dial5() {
    if(allowDial == true) {
        numberDial();
        number=number+"5";
        var DTMFToneDial5=new Audio('file:///M:/Documents/Virtual%20Phone/DTMF%20Tone%20Dials/DTMF Tone Dial 5.ogg');
        DTMFToneDial5.play();
    }
}

function dial6() {
    if(allowDial == true) {
        numberDial();
        number=number+"6";
        var DTMFToneDial6=new Audio('file:///M:/Documents/Virtual%20Phone/DTMF%20Tone%20Dials/DTMF Tone Dial 6.ogg');
        DTMFToneDial6.play();
    }
}

function dial7() {
    if(allowDial == true) {
        numberDial();
        number=number+"7";
        var DTMFToneDial7=new Audio('file:///M:/Documents/Virtual%20Phone/DTMF%20Tone%20Dials/DTMF Tone Dial 7.ogg');
        DTMFToneDial7.play();
    }
}

function dial8() {
    if(allowDial == true) {
        numberDial();
        number=number+"8";
        var DTMFToneDial8=new Audio('file:///M:/Documents/Virtual%20Phone/DTMF%20Tone%20Dials/DTMF Tone Dial 8.ogg');
        DTMFToneDial8.play();
    }
}

function dial9() {
    if(allowDial == true) {
        numberDial();
        number=number+"9";
        var DTMFToneDial9=new Audio('file:///M:/Documents/Virtual%20Phone/DTMF%20Tone%20Dials/DTMF Tone Dial 9.ogg');
        DTMFToneDial9.play();
    }
}

function dialStar() {
    if(allowDial == true) {
        numberDial();
        number=number+"*";
        var DTMFToneDialStar=new Audio('file:///M:/Documents/Virtual%20Phone/DTMF%20Tone%20Dials/DTMF Tone Dial Star.ogg');
        DTMFToneDialStar.play();
    }
}

function dial0() {
    if(allowDial == true) {
        numberDial();
        number=number+"0";
        var DTMFToneDial0=new Audio('file:///M:/Documents/Virtual%20Phone/DTMF%20Tone%20Dials/DTMF Tone Dial 0.ogg');
        DTMFToneDial0.play();
    }
}

function dialPound(){
    if(allowDial == true) {
        numberDial();
        number=number+"#";
        var DTMFToneDialPound=new Audio('file:///M:/Documents/Virtual%20Phone/DTMF%20Tone%20Dials/DTMF Tone Dial Pound.ogg');
        DTMFToneDialPound.play();
    }
}

document.onkeydown = function (event) {

    switch (event.keycode) {
        case 32:
            toggleLineStatus();
            break;
        case 49,97:
            dial1();
            break;
        case 50,98:
            dial2();
            break;
        case 51,99:
            dial3();
            break;
        case 52,100:
            dial4();
            break;
        case 53,101:
            dial5();
            break;
        case 54,102:
            dial6();
            break;
        case 55,103:
            dial7();
            break;
        case 56,104:
            dial8();
            break;
        case 57,105:
            dial9();
            break;
        case 106:
            dialStar();
            break;
        case 48,96:
            dial0();
            break;
        case 109:
            dialPound();
            break;
        default:
            hasDialedNumber = false;
            break;
    }
    }

function ring(){
    ringingTone.play();
    timesRung++;
    if(timesRung>1) {
        setTimeout(response,700);
    }
    }

function dial(){
    allowDial=false;
    ring();
    setTimeout(ring,4000);
    }
    }

function busy() {
    busyTone();
    }
    }

function busyTone() {
    var pickupBusy=new Audio('file:///M:/Documents/Virtual%20Phone/Call%20Progress%20Tones/Busy%20Tone/USA%20Busy%20Tone.ogg');
    pickupBusy.play();
    pickupBusy.currentTime=0;
    setInterval(busyTone,4000);
    }
    }

                function operatorPutCallThrough() {
                operatorPickup.play(true);
    }
    }

function response(){
    switch(number) {
        case "0":
            var operatorPickup=new Audio('callResponses/OperatorAnswer.wav');
            operatorPickup.addEventListener("ended", function(){
                number=prompt("Operator, your number please? (Numbers only; enter 'police' for police and emergency)");
                if(number==null){
                    number="0";
                }
       }
            break;
        case "611":
            var pickup611=new Audio('callResponses/611.wav');
            pickup611.addEventListener("ended", function(){
                timeoutHowler();
                pickup611.play();
}
            }
            break;
        case "711":
            var pickup711=new Audio('callResponses/tdd-1.mp3');
            pickup711.addEventListener("ended", function(){
                timeoutHowler();
            pickup711.play();
}
}
            break;
        case "811":
            var pickup811=new Audio('callResponses/811.wav');
            pickup811.addEventListener("ended", function() {
                timeoutHowler();
                pickup811.play();
}
}
            break;
        case "911":
            var pickup911=new Audio('callResponses/911-xxx-fleet.mp3');
            pickup911.addEventListener("ended", function() {
                timeoutHowler();
                pickup911.play();
}
}
            break;
        case "18477651008":
            var pickupMCI=new Audio('callResponses/MCI.wav');
            pickupMCI.addEventListener("ended", function(){
                timeoutHowler();
            pickupMCI.play();
}
}
            break;
        case "8675309":
            var pickup8675309=new Audio('callResponses/discoornis-bell-f1.mp3');
            pickup8675309.addEventListener("ended", function(){
                timeoutHowler();
                pickup8675309.play();
}
}
            break;
        case "12124561414":
            pickup12124561414.addEventListener("ended", function() {
                busy();
            pickup12124561414.play();
}
}
            break;
        case "5551212":
            pickup5551212.addEventListener("ended", function() {
                busy();
            pickup5551212.play();
}
}
            break;
        case "5555555":
            var pickup5555555=new Audio('callResponses/timeout-xxx-fleet.mp3');
            pickup5555555.addEventListener("ended", function() {
                timeoutHowler();
                pickup5555555.play();
}
}
            break;
        case "7480900":
            var pickupSelf=new Audio('callResponses/partyline-xxx-fleet.mp3');
            pickupSelf.addEventListener("ended", function() {
                busy();
            pickupSelf.play();
}
}
            break;
        case "18005820655":
            pickup18005820655.addEventListener("ended", function() {
                busy();
            pickup18005820655.play();
}
}
            break;
        case "6508950":
            var pickupAM=new Audio('callResponses/answering-machine-1.mp3');
            pickupAM.addEventListener("ended")
            pickupAM.play();
}
}
            break;
        case "6500050":
            var pickupModem=new Audio('modem.wav');
            pickupModem.addEventListener("ended")
            pickupModem.play();
}
}
            break;
        case "9703920":
            var pickupFax=new Audio('fax-1.mp3');
            pickupFax.addEventListener("ended")
            pickupFax.play();
}
}
            break;
        case "17147339969":
            var pickup714=new Audio('device-conference.mp3');
            pickup714.addEventListener("ended")
            pickup714.play();
}
}
            break;
        case "*8217147339969":
            var pickup714=new Audio('device-conference.mp3');
            pickup714.play();
}
}
            break;
        case "*6717147339969":
            var pickup714block=new Audio('callResponses/reject2-xxx-fleet.mp3');
            pickup714block.addEventListener("ended", function() {
                timeoutHowler();
                pickup714block.play();
  }
}
            break;
        case "*57":
            var randNum57=Math.random()>=0.5;
            if(randNum57) {
                var pickupCallTrace=new Audio('callResponses/trace3-xxx-fleet.mp3');
            }
            else {
                var pickupCallTrace=new Audio('callResponses/trace-xxx-fleet.mp3');
                pickupCallTrace.addEventListener("ended", function() {
                    timeoutHowler();
                    pickupCallTrace.play();
  }
}
            break;
        case "*69":
            var pickupStar69=new Audio('callResponses/return-xxx-fleet.mp3');
            pickupStar69.addEventListener("ended", function() {
                timeoutHowler();
                pickupStar69.play();
}
}
            break;
        case "police":
            var pickupPolice=new Audio('callResponses/policePickup.wav');
            pickupPolice.addEventListener("ended", function() {
                timeoutHowler();
                pickupPolice.play();
                var policeComplaint=prompt("Police Department, Sergeant Duffy Speaking.");
                confirm("Really? You say that "+policeComplaint);
}
}
            var policeHangup=new Audio('callResponses/policeHangup.wav');
            policeHangup.addEventListener("ended", function() {
                timeoutHowler();
            }
}
            break;
        default:
            var pickupDefault;
            if(number.length>7){
                pickupDefault=new Audio('callResponses/ldcircuits-bell-f1.mp3');
            }
            else {
                pickupDefault=new Audio('callResponses/completeordc-xxx-fleet.mp3');
            pickupDefault.addEventListener("ended", function() {
                timeoutHowler();
            pickupDefault.play();
}
}
            break;
    }
}
 
Can we focus on this portion of the code for a moment? I thought we had already covered this...
JavaScript:
function response(){
    switch(number) {
        case "0":
            var operatorPickup=new Audio('callResponses/OperatorAnswer.wav');
            operatorPickup.addEventListener("ended", function(){
                number=prompt("Operator, your number please? (Numbers only; enter 'police' for police and emergency)");
                if(number==null){
                    number="0";
                }
       }
            break;
        case "611":
            var pickup611=new Audio('callResponses/611.wav');
            pickup611.addEventListener("ended", function(){
                timeoutHowler();
                pickup611.play();
}
            }
            break;
        case "711":
            var pickup711=new Audio('callResponses/tdd-1.mp3');
            pickup711.addEventListener("ended", function(){
                timeoutHowler();
            pickup711.play();
}
}
            break;
        case "811":
            var pickup811=new Audio('callResponses/811.wav');
            pickup811.addEventListener("ended", function() {
                timeoutHowler();
                pickup811.play();
}
}
            break;
        case "911":
            var pickup911=new Audio('callResponses/911-xxx-fleet.mp3');
            pickup911.addEventListener("ended", function() {
                timeoutHowler();
                pickup911.play();
}
}
            break;
        case "18477651008":
            var pickupMCI=new Audio('callResponses/MCI.wav');
            pickupMCI.addEventListener("ended", function(){
                timeoutHowler();
            pickupMCI.play();
}
}
            break;
        case "8675309":
            var pickup8675309=new Audio('callResponses/discoornis-bell-f1.mp3');
            pickup8675309.addEventListener("ended", function(){
                timeoutHowler();
                pickup8675309.play();
}
}
            break;
        case "12124561414":
            pickup12124561414.addEventListener("ended", function() {
                busy();
            pickup12124561414.play();
}
}
            break;
        case "5551212":
            pickup5551212.addEventListener("ended", function() {
                busy();
            pickup5551212.play();
}
}
            break;
        case "5555555":
            var pickup5555555=new Audio('callResponses/timeout-xxx-fleet.mp3');
            pickup5555555.addEventListener("ended", function() {
                timeoutHowler();
                pickup5555555.play();
}
}
            break;
        case "7480900":
            var pickupSelf=new Audio('callResponses/partyline-xxx-fleet.mp3');
            pickupSelf.addEventListener("ended", function() {
                busy();
            pickupSelf.play();
}
}
            break;
        case "18005820655":
            pickup18005820655.addEventListener("ended", function() {
                busy();
            pickup18005820655.play();
}
}
            break;
        case "6508950":
            var pickupAM=new Audio('callResponses/answering-machine-1.mp3');
            pickupAM.addEventListener("ended")
            pickupAM.play();
}
}
            break;
        case "6500050":
            var pickupModem=new Audio('modem.wav');
            pickupModem.addEventListener("ended")
            pickupModem.play();
}
}
            break;
        case "9703920":
            var pickupFax=new Audio('fax-1.mp3');
            pickupFax.addEventListener("ended")
            pickupFax.play();
}
}
            break;
        case "17147339969":
            var pickup714=new Audio('device-conference.mp3');
            pickup714.addEventListener("ended")
            pickup714.play();
}
}
            break;
        case "*8217147339969":
            var pickup714=new Audio('device-conference.mp3');
            pickup714.play();
}
}
            break;
        case "*6717147339969":
            var pickup714block=new Audio('callResponses/reject2-xxx-fleet.mp3');
            pickup714block.addEventListener("ended", function() {
                timeoutHowler();
                pickup714block.play();
  }
}
            break;
        case "*57":
            var randNum57=Math.random()>=0.5;
            if(randNum57) {
                var pickupCallTrace=new Audio('callResponses/trace3-xxx-fleet.mp3');
            }
            else {
                var pickupCallTrace=new Audio('callResponses/trace-xxx-fleet.mp3');
                pickupCallTrace.addEventListener("ended", function() {
                    timeoutHowler();
                    pickupCallTrace.play();
  }
}
            break;
        case "*69":
            var pickupStar69=new Audio('callResponses/return-xxx-fleet.mp3');
            pickupStar69.addEventListener("ended", function() {
                timeoutHowler();
                pickupStar69.play();
}
}
            break;
        case "police":
            var pickupPolice=new Audio('callResponses/policePickup.wav');
            pickupPolice.addEventListener("ended", function() {
                timeoutHowler();
                pickupPolice.play();
                var policeComplaint=prompt("Police Department, Sergeant Duffy Speaking.");
                confirm("Really? You say that "+policeComplaint);
}
}
            var policeHangup=new Audio('callResponses/policeHangup.wav');
            policeHangup.addEventListener("ended", function() {
                timeoutHowler();
            }
}
            break;
        default:
            var pickupDefault;
            if(number.length>7){
                pickupDefault=new Audio('callResponses/ldcircuits-bell-f1.mp3');
            }
            else {
                pickupDefault=new Audio('callResponses/completeordc-xxx-fleet.mp3');
            pickupDefault.addEventListener("ended", function() {
                timeoutHowler();
            pickupDefault.play();
}
}
            break;
    }
}

Can we see where all the issues are at?
 
I'm guessing that on the part between var policeComplaint" and " var pickupDefault;", there's a "default:" statement without a "case" code.
You're in the general area for a handful of the issues are... but to be honest, they are pretty much in all cases, including the default.
Let's come back to the "lining things up as they should" statement I made earlier. Let's also come back to "how to set up an event listener"..

Can you tell me the difference between these two case statements?
JavaScript:
 case "18005820655":
            pickup18005820655.addEventListener("ended", function() {
                busy();
            pickup18005820655.play();
}
}
            break;
        case "6508950":
            var pickupAM=new Audio('callResponses/answering-machine-1.mp3');
            pickupAM.addEventListener("ended")
            pickupAM.play();
}
}
            break;

Please look at the .addEventListener calls you are making 😉
 
You're in the general area for a handful of the issues are... but to be honest, they are pretty much in all cases, including the default.
Let's come back to the "lining things up as they should" statement I made earlier. Let's also come back to "how to set up an event listener"..

Can you tell me the difference between these two case statements?
JavaScript:
 case "18005820655":
            pickup18005820655.addEventListener("ended", function() {
                busy();
            pickup18005820655.play();
}
}
            break;
        case "6508950":
            var pickupAM=new Audio('callResponses/answering-machine-1.mp3');
            pickupAM.addEventListener("ended")
            pickupAM.play();
}
}
            break;

Please look at the .addEventListener calls you are making 😉
I could tell right away that the second case was missing a function. But what function is supposed to be there, I'm not exactly sure.
 
I could tell right away that the second case was missing a function. But what function is supposed to be there, I'm not exactly sure.
I do hope you mean that you are not sure as to what should go into the function... because you don't need to know what function should go in the event listener...event listener needs, let me emphasize the word NEEDS a function... whether you define it inside of the call, or outside and just call the function by reference, see below:

JavaScript:
button.addEventListener('click', function() {
    //logic here
});

//OR passed in by reference

function thisFunc() {
    //logic here
}

button.addEventListener('click', thisFunc);
So, coming back to a bit of basics, addEventListener can be passed 3 different parameters, with the first two being required and the last parameter being optional.
The parameters are as follows: type, listener, options/useCapture (optional).
Learn more here: EventTarget: addEventListener() method - Web APIs | MDN
JavaScript:
addEventListener(type, listener)
addEventListener(type, listener, options)
addEventListener(type, listener, useCapture)

The type parameter is a string that defines the event that will trigger this. Example: 'click', 'onkeyup', 'onkeydown'
More on types of events: Event reference | MDN

They listener parameter, or often times called the 'callback function' is a function that will be executed when the event type triggers the call to eventListener
 
Let me rephrase that. Should I put Something like:
Code:
button.addEventListener('click', function() {
In that second case? The one that you say lacks an event listener? Or should I put something like:
Code:
button.addEventListener("ended", function() {
 
Let me rephrase that. Should I put Something like:
Code:
button.addEventListener('click', function() {
In that second case? The one that you say lacks an event listener? Or should I put something like:
Code:
button.addEventListener("ended", function() {
I don't believe there is an event called "ended"...you may want to double check. but yes, 'click' is a valid event, and yes, please add that callback function
 
How's this?
Code:
//grab the button 'hookSwitch'
var hookSwitch = document.querySelector('button.hookSwitch');

//create an event listener for a click event
hookStatus.addEventListener("onclick", function(){
    //inside of the callback function for click event listener, add the on/off classes to the span like this:
    //grab the span element
    var hookStatus = document.querySelector('span.hookStatus');

    //grab check the current status class "on/off", if "on", remove and add "off", otherwise do the same if "on"
    if ( hookStatus.classlist.contains('off') ){
        //remove 'off' class
        hookStatus.classlist.remove('off');  
        //add 'on' class
        hookStatus.classlist.add('on');
        //change span text
        hookStatus.textContent = "Off Hook";  
    }
    else {
        if ( hookStatus.classlist.contains('on') ){
            //remove 'on' class
            hookStatus.classlist.remove('on');  
            //add 'off' class
            hookStatus.classlist.add('off');
            //change span text
            hookStatus.textContent = "Off Hook";
        }
    }
});
var dialTone=new Audio('file:///M:/Documents/Virtual%20Phone/Call%20Progress%20Tones/Dial%20Tone/USA%20Dial%20Tone.ogg');
var isOffHook=false;
var callIncoming=false;
var allowDial = true;
var ringingTone=new Audio('Ringing Tone/Princess%20702B%20Bell%20Ring.ogg');
var timesRung=0;
var availableNumbers=["0","611","711","811","911","*67 + 1 (847) 765-1008","1 (847) 765-1008","867-5309",
                        "1 (212) 456-1414","555-1212","555-5555","748-0900","650-0050","650-8950",
                        "970-3920","1 (714) 733-9969","*57","*69"];


function reload(){
    location.reload(true);
}

document.getElementById('toggleLineStatus').onclick=function(){
    toggleLineStatus()
};

function toggleLineStatus() {
    var number="";
    var pin="";
    var checkForPin=false;
    document.getElementById('numberbeingdialed').innerHTML=number;
    var wasOnHook=false;

    if(!offHook){
        offHook=true;
        document.getElementById('hookstatus').innerHTML="Off";
        wasOnHook=true;
    } else {
        offHook=false;
        document.getElementById('hookstatus').innerHTML="On";
        clunk.pause();
        ringback.pause();
        clunk.currentTime=0;
        ringback.currentTime=0;
    }
 
    if(ringbackDialed){
        startRingback();
    } else {
        if(wasOnHook){
            ring.pause();
            ring.currentTime=0;
            playDialTone();
            dialingAllowed=true;
            nextDigitDialable=true;
            ringbackDialed=false;
            keepPlaying=true;
        }
        else {
            stopDialTone();
            setOpacity(100);
            allCircuitsBusy=false;
            keepPlaying=false;
        }
    }
}

function numberSuggestion(){
    var randomNumber=Math.floor(Math.random()*(availableNumbers.length));
    var suggestedNumber=availableNumbers[randomNumber];
    document.getElementById("suggestion").innerHTML="How about dialing <strong id='suggestedTelephoneNumber'>"+
                                                    suggestedNumber+
                                                    "</strong>? Don't like this number? Click the button above again!";
}

function receiverRaised(){
    if(allowDial == false) {
        telephoneAnswered()
    }
 
    if(allowDial == true) {
        dialTone.play();
    } else {
        offHook ();
        timeoutHowler.play();
    }
}

setCallTimeout();

function setCallTimeout(){
    var delay=5000;
    var delayCaller=Math.floor((Math.random()*8000)+1);
    delay=delay+delayCaller;
    setTimeout(incomingCall,delay);
}

function offHook(){
    isOffHook=true;
    document.getElementById("WE2500").style.display="none";
    document.getElementById("dialPad").style.display="block";
}

function dialToneTimedOut() {
    allowDial=false;
    timeoutHowler();
    if(DialToneTimedOut == true) {
        timeoutHowler.play();
        timeoutHowler.currentTime=0;
    }
}

function incomingCall(){
    var ringRing=new Audio('Ringing Tone/Princess%20702B%20Bell%20Ring.ogg');
    var hasTelephoneBeenAnswered=false;
    ringTelephone();
}

function ringTelephone(){
    if(!hasTelephoneBeenAnswered == false) {
        ringRing.play();
        ringRing.currentTime=0;
    }
 
    else {
    if(isOffHook == false) {
        ringRing.play();
    }
 
    if(allowDial == false) {
        callIncoming=true;
        setInterval(ringTelephone,5500);
    }
}

var number="";
var timeout="";

function numberDial() {
    if(dialTone){
        dialTone.pause();
        dialTone.currentTime=0
    }
}

function dial1() {
    if(allowDial == true) {
        numberDial();
        number=number+"1";
        var DTMFToneDial1=new Audio('file:///M:/Documents/Virtual%20Phone/DTMF%20Tone%20Dials/DTMF%20Tone%20Dial%201.ogg');
        DTMFToneDial1.play();
    }
}

function dial2() {
    if(allowDial == true); {
        numberDial();
        number=number+"2";
        var DTMFToneDial2=new Audio('file:///M:/Documents/Virtual%20Phone/DTMF%20Tone%20Dials/DTMF%20Tone%20Dial%202.ogg');
        DTMFToneDial2.play();
    }
}

function dial3() {
    if(allowDial == true); {
        numberDial();
        number=number+"3";
        var DTMFToneDial3=new Audio('file:///M:/Documents/Virtual%20Phone/DTMF%20Tone%20Dials/DTMF Tone Dial 3.ogg');
        DTMFToneDial3.play();
    }
}

function dial4() {
    if(allowDial == true) {
        numberDial();
        number=number+"4";
        var DTMFToneDial4=new Audio('file:///M:/Documents/Virtual%20Phone/DTMF%20Tone%20Dials/DTMF Tone Dial 4.ogg');
        DTMFToneDial4.play();
    }
}

function dial5() {
    if(allowDial == true) {
        numberDial();
        number=number+"5";
        var DTMFToneDial5=new Audio('file:///M:/Documents/Virtual%20Phone/DTMF%20Tone%20Dials/DTMF Tone Dial 5.ogg');
        DTMFToneDial5.play();
    }
}

function dial6() {
    if(allowDial == true) {
        numberDial();
        number=number+"6";
        var DTMFToneDial6=new Audio('file:///M:/Documents/Virtual%20Phone/DTMF%20Tone%20Dials/DTMF Tone Dial 6.ogg');
        DTMFToneDial6.play();
    }
}

function dial7() {
    if(allowDial == true) {
        numberDial();
        number=number+"7";
        var DTMFToneDial7=new Audio('file:///M:/Documents/Virtual%20Phone/DTMF%20Tone%20Dials/DTMF Tone Dial 7.ogg');
        DTMFToneDial7.play();
    }
}

function dial8() {
    if(allowDial == true) {
        numberDial();
        number=number+"8";
        var DTMFToneDial8=new Audio('file:///M:/Documents/Virtual%20Phone/DTMF%20Tone%20Dials/DTMF Tone Dial 8.ogg');
        DTMFToneDial8.play();
    }
}

function dial9() {
    if(allowDial == true) {
        numberDial();
        number=number+"9";
        var DTMFToneDial9=new Audio('file:///M:/Documents/Virtual%20Phone/DTMF%20Tone%20Dials/DTMF Tone Dial 9.ogg');
        DTMFToneDial9.play();
    }
}

function dialStar() {
    if(allowDial == true) {
        numberDial();
        number=number+"*";
        var DTMFToneDialStar=new Audio('file:///M:/Documents/Virtual%20Phone/DTMF%20Tone%20Dials/DTMF Tone Dial Star.ogg');
        DTMFToneDialStar.play();
    }
}

function dial0() {
    if(allowDial == true) {
        numberDial();
        number=number+"0";
        var DTMFToneDial0=new Audio('file:///M:/Documents/Virtual%20Phone/DTMF%20Tone%20Dials/DTMF Tone Dial 0.ogg');
        DTMFToneDial0.play();
    }
}

function dialPound(){
    if(allowDial == true) {
        numberDial();
        number=number+"#";
        var DTMFToneDialPound=new Audio('file:///M:/Documents/Virtual%20Phone/DTMF%20Tone%20Dials/DTMF Tone Dial Pound.ogg');
        DTMFToneDialPound.play();
    }
}

document.onkeydown = function (event) {

    switch (event.keycode) {
        case 32:
button.addEventListener('click', function() {
            toggleLineStatus();
}
            break;
        case 49,97:
button.addEventListener('click', function() {
            dial1();
}
            break;
        case 50,98:
button.addEventListener('click', function() {
            dial2();
}
            break;
        case 51,99:
button.addEventListener('click', function() {
            dial3();
}
            break;
        case 52,100:
button.addEventListener('click', function() {
            dial4();
}
            break;
        case 53,101:
button.addEventListener('click', function() {
            dial5();
}
            break;
        case 54,102:
button.addEventListener('click', function() {
            dial6();
}
            break;
        case 55,103:
button.addEventListener('click', function() {
            dial7();
}
            break;
        case 56,104:
button.addEventListener('click', function() {
            dial8();
}
            break;
        case 57,105:
button.addEventListener('click', function() {
            dial9();
}
            break;
        case 106:
button.addEventListener('click', function() {
            dialStar();
}
            break;
        case 48,96:
button.addEventListener('click', function() {
            dial0();
}
            break;
        case 109:
            dialPound();
            break;
        default:
            hasDialedNumber = false;
            break;
    }
    }

function ring(){
    ringingTone.play();
    timesRung++;
    if(timesRung>1) {
        setTimeout(response,700);
    }
    }

function dial(){
    allowDial=false;
    ring();
    setTimeout(ring,4000);
    }
    }

function busy() {
    busyTone();
    }
    }

function busyTone() {
    var pickupBusy=new Audio('file:///M:/Documents/Virtual%20Phone/Call%20Progress%20Tones/Busy%20Tone/USA%20Busy%20Tone.ogg');
    pickupBusy.play();
    pickupBusy.currentTime=0;
    setInterval(busyTone,4000);
    }
    }

                function operatorPutCallThrough() {
                operatorPickup.play(true);
    }
    }

function response(){
    switch(number) {
        case "0":
            var operatorPickup=new Audio('callResponses/OperatorAnswer.wav');
            operatorPickup.addEventListener("ended", function(){
                number=prompt("Operator, your number please? (Numbers only; enter 'police' for police and emergency)");
                if(number==null){
                    number="0";
                }
       }
            break;
        case "611":
            var pickup611=new Audio('callResponses/611.wav');
            pickup611.addEventListener("ended", function(){
                timeoutHowler();
                pickup611.play();
}
            }
            break;
        case "711":
            var pickup711=new Audio('callResponses/tdd-1.mp3');
            pickup711.addEventListener("ended", function(){
                timeoutHowler();
            pickup711.play();
}
}
            break;
        case "811":
            var pickup811=new Audio('callResponses/811.wav');
            pickup811.addEventListener("ended", function() {
                timeoutHowler();
                pickup811.play();
}
}
            break;
        case "911":
            var pickup911=new Audio('callResponses/911-xxx-fleet.mp3');
            pickup911.addEventListener("ended", function() {
                timeoutHowler();
                pickup911.play();
}
}
            break;
        case "18477651008":
            var pickupMCI=new Audio('callResponses/MCI.wav');
            pickupMCI.addEventListener("ended", function(){
                timeoutHowler();
            pickupMCI.play();
}
}
            break;
        case "8675309":
            var pickup8675309=new Audio('callResponses/discoornis-bell-f1.mp3');
            pickup8675309.addEventListener("ended", function(){
                timeoutHowler();
                pickup8675309.play();
}
}
            break;
        case "12124561414":
            pickup12124561414.addEventListener("ended", function() {
                busy();
            pickup12124561414.play();
}
}
            break;
        case "5551212":
            pickup5551212.addEventListener("ended", function() {
                busy();
            pickup5551212.play();
}
}
            break;
        case "5555555":
            var pickup5555555=new Audio('callResponses/timeout-xxx-fleet.mp3');
            pickup5555555.addEventListener("ended", function() {
                timeoutHowler();
                pickup5555555.play();
}
}
            break;
        case "7480900":
            var pickupSelf=new Audio('callResponses/partyline-xxx-fleet.mp3');
            pickupSelf.addEventListener("ended", function() {
                busy();
            pickupSelf.play();
}
}
            break;
        case "18005820655":
            pickup18005820655.addEventListener("ended", function() {
                busy();
            pickup18005820655.play();
}
}
            break;
        case "6508950":
            var pickupAM=new Audio('callResponses/answering-machine-1.mp3');
            pickupAM.addEventListener("ended")
            pickupAM.play();
}
}
            break;
        case "6500050":
            var pickupModem=new Audio('modem.wav');
            pickupModem.addEventListener("ended")
            pickupModem.play();
}
}
            break;
        case "9703920":
            var pickupFax=new Audio('fax-1.mp3');
            pickupFax.addEventListener("ended")
            pickupFax.play();
}
}
            break;
        case "17147339969":
            var pickup714=new Audio('device-conference.mp3');
            pickup714.addEventListener("ended")
            pickup714.play();
}
}
            break;
        case "*8217147339969":
            var pickup714=new Audio('device-conference.mp3');
            pickup714.play();
}
}
            break;
        case "*6717147339969":
            var pickup714block=new Audio('callResponses/reject2-xxx-fleet.mp3');
            pickup714block.addEventListener("ended", function() {
                timeoutHowler();
                pickup714block.play();
  }
}
            break;
        case "*57":
            var randNum57=Math.random()>=0.5;
            if(randNum57) {
                var pickupCallTrace=new Audio('callResponses/trace3-xxx-fleet.mp3');
            }
            else {
                var pickupCallTrace=new Audio('callResponses/trace-xxx-fleet.mp3');
                pickupCallTrace.addEventListener("ended", function() {
                    timeoutHowler();
                    pickupCallTrace.play();
  }
}
            break;
        case "*69":
            var pickupStar69=new Audio('callResponses/return-xxx-fleet.mp3');
            pickupStar69.addEventListener("ended", function() {
                timeoutHowler();
                pickupStar69.play();
}
}
            break;
        case "police":
            var pickupPolice=new Audio('callResponses/policePickup.wav');
            pickupPolice.addEventListener("ended", function() {
                timeoutHowler();
                pickupPolice.play();
                var policeComplaint=prompt("Police Department, Sergeant Duffy Speaking.");
                confirm("Really? You say that "+policeComplaint);
}
}
            var policeHangup=new Audio('callResponses/policeHangup.wav');
            policeHangup.addEventListener("ended", function() {
                timeoutHowler();
            }
}
            break;
        default:
            var pickupDefault;
            if(number.length>7){
                pickupDefault=new Audio('callResponses/ldcircuits-bell-f1.mp3');
            }
            else {
                pickupDefault=new Audio('callResponses/completeordc-xxx-fleet.mp3');
            pickupDefault.addEventListener("ended", function() {
                timeoutHowler();
            pickupDefault.play();
}
}
            break;
    }
}
 
How's this?
Code:
//grab the button 'hookSwitch'
var hookSwitch = document.querySelector('button.hookSwitch');

//create an event listener for a click event
hookStatus.addEventListener("onclick", function(){
    //inside of the callback function for click event listener, add the on/off classes to the span like this:
    //grab the span element
    var hookStatus = document.querySelector('span.hookStatus');

    //grab check the current status class "on/off", if "on", remove and add "off", otherwise do the same if "on"
    if ( hookStatus.classlist.contains('off') ){
        //remove 'off' class
        hookStatus.classlist.remove('off'); 
        //add 'on' class
        hookStatus.classlist.add('on');
        //change span text
        hookStatus.textContent = "Off Hook"; 
    }
    else {
        if ( hookStatus.classlist.contains('on') ){
            //remove 'on' class
            hookStatus.classlist.remove('on'); 
            //add 'off' class
            hookStatus.classlist.add('off');
            //change span text
            hookStatus.textContent = "Off Hook";
        }
    }
});
var dialTone=new Audio('file:///M:/Documents/Virtual%20Phone/Call%20Progress%20Tones/Dial%20Tone/USA%20Dial%20Tone.ogg');
var isOffHook=false;
var callIncoming=false;
var allowDial = true;
var ringingTone=new Audio('Ringing Tone/Princess%20702B%20Bell%20Ring.ogg');
var timesRung=0;
var availableNumbers=["0","611","711","811","911","*67 + 1 (847) 765-1008","1 (847) 765-1008","867-5309",
                        "1 (212) 456-1414","555-1212","555-5555","748-0900","650-0050","650-8950",
                        "970-3920","1 (714) 733-9969","*57","*69"];


function reload(){
    location.reload(true);
}

document.getElementById('toggleLineStatus').onclick=function(){
    toggleLineStatus()
};

function toggleLineStatus() {
    var number="";
    var pin="";
    var checkForPin=false;
    document.getElementById('numberbeingdialed').innerHTML=number;
    var wasOnHook=false;

    if(!offHook){
        offHook=true;
        document.getElementById('hookstatus').innerHTML="Off";
        wasOnHook=true;
    } else {
        offHook=false;
        document.getElementById('hookstatus').innerHTML="On";
        clunk.pause();
        ringback.pause();
        clunk.currentTime=0;
        ringback.currentTime=0;
    }
 
    if(ringbackDialed){
        startRingback();
    } else {
        if(wasOnHook){
            ring.pause();
            ring.currentTime=0;
            playDialTone();
            dialingAllowed=true;
            nextDigitDialable=true;
            ringbackDialed=false;
            keepPlaying=true;
        }
        else {
            stopDialTone();
            setOpacity(100);
            allCircuitsBusy=false;
            keepPlaying=false;
        }
    }
}

function numberSuggestion(){
    var randomNumber=Math.floor(Math.random()*(availableNumbers.length));
    var suggestedNumber=availableNumbers[randomNumber];
    document.getElementById("suggestion").innerHTML="How about dialing <strong id='suggestedTelephoneNumber'>"+
                                                    suggestedNumber+
                                                    "</strong>? Don't like this number? Click the button above again!";
}

function receiverRaised(){
    if(allowDial == false) {
        telephoneAnswered()
    }
 
    if(allowDial == true) {
        dialTone.play();
    } else {
        offHook ();
        timeoutHowler.play();
    }
}

setCallTimeout();

function setCallTimeout(){
    var delay=5000;
    var delayCaller=Math.floor((Math.random()*8000)+1);
    delay=delay+delayCaller;
    setTimeout(incomingCall,delay);
}

function offHook(){
    isOffHook=true;
    document.getElementById("WE2500").style.display="none";
    document.getElementById("dialPad").style.display="block";
}

function dialToneTimedOut() {
    allowDial=false;
    timeoutHowler();
    if(DialToneTimedOut == true) {
        timeoutHowler.play();
        timeoutHowler.currentTime=0;
    }
}

function incomingCall(){
    var ringRing=new Audio('Ringing Tone/Princess%20702B%20Bell%20Ring.ogg');
    var hasTelephoneBeenAnswered=false;
    ringTelephone();
}

function ringTelephone(){
    if(!hasTelephoneBeenAnswered == false) {
        ringRing.play();
        ringRing.currentTime=0;
    }
 
    else {
    if(isOffHook == false) {
        ringRing.play();
    }
 
    if(allowDial == false) {
        callIncoming=true;
        setInterval(ringTelephone,5500);
    }
}

var number="";
var timeout="";

function numberDial() {
    if(dialTone){
        dialTone.pause();
        dialTone.currentTime=0
    }
}

function dial1() {
    if(allowDial == true) {
        numberDial();
        number=number+"1";
        var DTMFToneDial1=new Audio('file:///M:/Documents/Virtual%20Phone/DTMF%20Tone%20Dials/DTMF%20Tone%20Dial%201.ogg');
        DTMFToneDial1.play();
    }
}

function dial2() {
    if(allowDial == true); {
        numberDial();
        number=number+"2";
        var DTMFToneDial2=new Audio('file:///M:/Documents/Virtual%20Phone/DTMF%20Tone%20Dials/DTMF%20Tone%20Dial%202.ogg');
        DTMFToneDial2.play();
    }
}

function dial3() {
    if(allowDial == true); {
        numberDial();
        number=number+"3";
        var DTMFToneDial3=new Audio('file:///M:/Documents/Virtual%20Phone/DTMF%20Tone%20Dials/DTMF Tone Dial 3.ogg');
        DTMFToneDial3.play();
    }
}

function dial4() {
    if(allowDial == true) {
        numberDial();
        number=number+"4";
        var DTMFToneDial4=new Audio('file:///M:/Documents/Virtual%20Phone/DTMF%20Tone%20Dials/DTMF Tone Dial 4.ogg');
        DTMFToneDial4.play();
    }
}

function dial5() {
    if(allowDial == true) {
        numberDial();
        number=number+"5";
        var DTMFToneDial5=new Audio('file:///M:/Documents/Virtual%20Phone/DTMF%20Tone%20Dials/DTMF Tone Dial 5.ogg');
        DTMFToneDial5.play();
    }
}

function dial6() {
    if(allowDial == true) {
        numberDial();
        number=number+"6";
        var DTMFToneDial6=new Audio('file:///M:/Documents/Virtual%20Phone/DTMF%20Tone%20Dials/DTMF Tone Dial 6.ogg');
        DTMFToneDial6.play();
    }
}

function dial7() {
    if(allowDial == true) {
        numberDial();
        number=number+"7";
        var DTMFToneDial7=new Audio('file:///M:/Documents/Virtual%20Phone/DTMF%20Tone%20Dials/DTMF Tone Dial 7.ogg');
        DTMFToneDial7.play();
    }
}

function dial8() {
    if(allowDial == true) {
        numberDial();
        number=number+"8";
        var DTMFToneDial8=new Audio('file:///M:/Documents/Virtual%20Phone/DTMF%20Tone%20Dials/DTMF Tone Dial 8.ogg');
        DTMFToneDial8.play();
    }
}

function dial9() {
    if(allowDial == true) {
        numberDial();
        number=number+"9";
        var DTMFToneDial9=new Audio('file:///M:/Documents/Virtual%20Phone/DTMF%20Tone%20Dials/DTMF Tone Dial 9.ogg');
        DTMFToneDial9.play();
    }
}

function dialStar() {
    if(allowDial == true) {
        numberDial();
        number=number+"*";
        var DTMFToneDialStar=new Audio('file:///M:/Documents/Virtual%20Phone/DTMF%20Tone%20Dials/DTMF Tone Dial Star.ogg');
        DTMFToneDialStar.play();
    }
}

function dial0() {
    if(allowDial == true) {
        numberDial();
        number=number+"0";
        var DTMFToneDial0=new Audio('file:///M:/Documents/Virtual%20Phone/DTMF%20Tone%20Dials/DTMF Tone Dial 0.ogg');
        DTMFToneDial0.play();
    }
}

function dialPound(){
    if(allowDial == true) {
        numberDial();
        number=number+"#";
        var DTMFToneDialPound=new Audio('file:///M:/Documents/Virtual%20Phone/DTMF%20Tone%20Dials/DTMF Tone Dial Pound.ogg');
        DTMFToneDialPound.play();
    }
}

document.onkeydown = function (event) {

    switch (event.keycode) {
        case 32:
button.addEventListener('click', function() {
            toggleLineStatus();
}
            break;
        case 49,97:
button.addEventListener('click', function() {
            dial1();
}
            break;
        case 50,98:
button.addEventListener('click', function() {
            dial2();
}
            break;
        case 51,99:
button.addEventListener('click', function() {
            dial3();
}
            break;
        case 52,100:
button.addEventListener('click', function() {
            dial4();
}
            break;
        case 53,101:
button.addEventListener('click', function() {
            dial5();
}
            break;
        case 54,102:
button.addEventListener('click', function() {
            dial6();
}
            break;
        case 55,103:
button.addEventListener('click', function() {
            dial7();
}
            break;
        case 56,104:
button.addEventListener('click', function() {
            dial8();
}
            break;
        case 57,105:
button.addEventListener('click', function() {
            dial9();
}
            break;
        case 106:
button.addEventListener('click', function() {
            dialStar();
}
            break;
        case 48,96:
button.addEventListener('click', function() {
            dial0();
}
            break;
        case 109:
            dialPound();
            break;
        default:
            hasDialedNumber = false;
            break;
    }
    }

function ring(){
    ringingTone.play();
    timesRung++;
    if(timesRung>1) {
        setTimeout(response,700);
    }
    }

function dial(){
    allowDial=false;
    ring();
    setTimeout(ring,4000);
    }
    }

function busy() {
    busyTone();
    }
    }

function busyTone() {
    var pickupBusy=new Audio('file:///M:/Documents/Virtual%20Phone/Call%20Progress%20Tones/Busy%20Tone/USA%20Busy%20Tone.ogg');
    pickupBusy.play();
    pickupBusy.currentTime=0;
    setInterval(busyTone,4000);
    }
    }

                function operatorPutCallThrough() {
                operatorPickup.play(true);
    }
    }

function response(){
    switch(number) {
        case "0":
            var operatorPickup=new Audio('callResponses/OperatorAnswer.wav');
            operatorPickup.addEventListener("ended", function(){
                number=prompt("Operator, your number please? (Numbers only; enter 'police' for police and emergency)");
                if(number==null){
                    number="0";
                }
       }
            break;
        case "611":
            var pickup611=new Audio('callResponses/611.wav');
            pickup611.addEventListener("ended", function(){
                timeoutHowler();
                pickup611.play();
}
            }
            break;
        case "711":
            var pickup711=new Audio('callResponses/tdd-1.mp3');
            pickup711.addEventListener("ended", function(){
                timeoutHowler();
            pickup711.play();
}
}
            break;
        case "811":
            var pickup811=new Audio('callResponses/811.wav');
            pickup811.addEventListener("ended", function() {
                timeoutHowler();
                pickup811.play();
}
}
            break;
        case "911":
            var pickup911=new Audio('callResponses/911-xxx-fleet.mp3');
            pickup911.addEventListener("ended", function() {
                timeoutHowler();
                pickup911.play();
}
}
            break;
        case "18477651008":
            var pickupMCI=new Audio('callResponses/MCI.wav');
            pickupMCI.addEventListener("ended", function(){
                timeoutHowler();
            pickupMCI.play();
}
}
            break;
        case "8675309":
            var pickup8675309=new Audio('callResponses/discoornis-bell-f1.mp3');
            pickup8675309.addEventListener("ended", function(){
                timeoutHowler();
                pickup8675309.play();
}
}
            break;
        case "12124561414":
            pickup12124561414.addEventListener("ended", function() {
                busy();
            pickup12124561414.play();
}
}
            break;
        case "5551212":
            pickup5551212.addEventListener("ended", function() {
                busy();
            pickup5551212.play();
}
}
            break;
        case "5555555":
            var pickup5555555=new Audio('callResponses/timeout-xxx-fleet.mp3');
            pickup5555555.addEventListener("ended", function() {
                timeoutHowler();
                pickup5555555.play();
}
}
            break;
        case "7480900":
            var pickupSelf=new Audio('callResponses/partyline-xxx-fleet.mp3');
            pickupSelf.addEventListener("ended", function() {
                busy();
            pickupSelf.play();
}
}
            break;
        case "18005820655":
            pickup18005820655.addEventListener("ended", function() {
                busy();
            pickup18005820655.play();
}
}
            break;
        case "6508950":
            var pickupAM=new Audio('callResponses/answering-machine-1.mp3');
            pickupAM.addEventListener("ended")
            pickupAM.play();
}
}
            break;
        case "6500050":
            var pickupModem=new Audio('modem.wav');
            pickupModem.addEventListener("ended")
            pickupModem.play();
}
}
            break;
        case "9703920":
            var pickupFax=new Audio('fax-1.mp3');
            pickupFax.addEventListener("ended")
            pickupFax.play();
}
}
            break;
        case "17147339969":
            var pickup714=new Audio('device-conference.mp3');
            pickup714.addEventListener("ended")
            pickup714.play();
}
}
            break;
        case "*8217147339969":
            var pickup714=new Audio('device-conference.mp3');
            pickup714.play();
}
}
            break;
        case "*6717147339969":
            var pickup714block=new Audio('callResponses/reject2-xxx-fleet.mp3');
            pickup714block.addEventListener("ended", function() {
                timeoutHowler();
                pickup714block.play();
  }
}
            break;
        case "*57":
            var randNum57=Math.random()>=0.5;
            if(randNum57) {
                var pickupCallTrace=new Audio('callResponses/trace3-xxx-fleet.mp3');
            }
            else {
                var pickupCallTrace=new Audio('callResponses/trace-xxx-fleet.mp3');
                pickupCallTrace.addEventListener("ended", function() {
                    timeoutHowler();
                    pickupCallTrace.play();
  }
}
            break;
        case "*69":
            var pickupStar69=new Audio('callResponses/return-xxx-fleet.mp3');
            pickupStar69.addEventListener("ended", function() {
                timeoutHowler();
                pickupStar69.play();
}
}
            break;
        case "police":
            var pickupPolice=new Audio('callResponses/policePickup.wav');
            pickupPolice.addEventListener("ended", function() {
                timeoutHowler();
                pickupPolice.play();
                var policeComplaint=prompt("Police Department, Sergeant Duffy Speaking.");
                confirm("Really? You say that "+policeComplaint);
}
}
            var policeHangup=new Audio('callResponses/policeHangup.wav');
            policeHangup.addEventListener("ended", function() {
                timeoutHowler();
            }
}
            break;
        default:
            var pickupDefault;
            if(number.length>7){
                pickupDefault=new Audio('callResponses/ldcircuits-bell-f1.mp3');
            }
            else {
                pickupDefault=new Audio('callResponses/completeordc-xxx-fleet.mp3');
            pickupDefault.addEventListener("ended", function() {
                timeoutHowler();
            pickupDefault.play();
}
}
            break;
    }
}
You got the callback function... but missed the event type. Please look over that resource link I provided and select a proper event type
 
You got the callback function... but missed the event type. Please look over that resource link I provided and select a proper event type
Also, can rather than using the ["CODE"] ["/CODE"] bbcode, can you instead use ["CODE=javascript"] ["/CODE"] bbcode.. I think this would help with the formatting issues, in part
 
Can we focus on this portion of the code for a moment? I thought we had already covered this...
JavaScript:
function response(){
    switch(number) {
        case "0":
            var operatorPickup=new Audio('callResponses/OperatorAnswer.wav');
            operatorPickup.addEventListener("ended", function(){
                number=prompt("Operator, your number please? (Numbers only; enter 'police' for police and emergency)");
                if(number==null){
                    number="0";
                }
       }
            break;
        case "611":
            var pickup611=new Audio('callResponses/611.wav');
            pickup611.addEventListener("ended", function(){
                timeoutHowler();
                pickup611.play();
}
            }
            break;
        case "711":
            var pickup711=new Audio('callResponses/tdd-1.mp3');
            pickup711.addEventListener("ended", function(){
                timeoutHowler();
            pickup711.play();
}
}
            break;
        case "811":
            var pickup811=new Audio('callResponses/811.wav');
            pickup811.addEventListener("ended", function() {
                timeoutHowler();
                pickup811.play();
}
}
            break;
        case "911":
            var pickup911=new Audio('callResponses/911-xxx-fleet.mp3');
            pickup911.addEventListener("ended", function() {
                timeoutHowler();
                pickup911.play();
}
}
            break;
        case "18477651008":
            var pickupMCI=new Audio('callResponses/MCI.wav');
            pickupMCI.addEventListener("ended", function(){
                timeoutHowler();
            pickupMCI.play();
}
}
            break;
        case "8675309":
            var pickup8675309=new Audio('callResponses/discoornis-bell-f1.mp3');
            pickup8675309.addEventListener("ended", function(){
                timeoutHowler();
                pickup8675309.play();
}
}
            break;
        case "12124561414":
            pickup12124561414.addEventListener("ended", function() {
                busy();
            pickup12124561414.play();
}
}
            break;
        case "5551212":
            pickup5551212.addEventListener("ended", function() {
                busy();
            pickup5551212.play();
}
}
            break;
        case "5555555":
            var pickup5555555=new Audio('callResponses/timeout-xxx-fleet.mp3');
            pickup5555555.addEventListener("ended", function() {
                timeoutHowler();
                pickup5555555.play();
}
}
            break;
        case "7480900":
            var pickupSelf=new Audio('callResponses/partyline-xxx-fleet.mp3');
            pickupSelf.addEventListener("ended", function() {
                busy();
            pickupSelf.play();
}
}
            break;
        case "18005820655":
            pickup18005820655.addEventListener("ended", function() {
                busy();
            pickup18005820655.play();
}
}
            break;
        case "6508950":
            var pickupAM=new Audio('callResponses/answering-machine-1.mp3');
            pickupAM.addEventListener("ended")
            pickupAM.play();
}
}
            break;
        case "6500050":
            var pickupModem=new Audio('modem.wav');
            pickupModem.addEventListener("ended")
            pickupModem.play();
}
}
            break;
        case "9703920":
            var pickupFax=new Audio('fax-1.mp3');
            pickupFax.addEventListener("ended")
            pickupFax.play();
}
}
            break;
        case "17147339969":
            var pickup714=new Audio('device-conference.mp3');
            pickup714.addEventListener("ended")
            pickup714.play();
}
}
            break;
        case "*8217147339969":
            var pickup714=new Audio('device-conference.mp3');
            pickup714.play();
}
}
            break;
        case "*6717147339969":
            var pickup714block=new Audio('callResponses/reject2-xxx-fleet.mp3');
            pickup714block.addEventListener("ended", function() {
                timeoutHowler();
                pickup714block.play();
  }
}
            break;
        case "*57":
            var randNum57=Math.random()>=0.5;
            if(randNum57) {
                var pickupCallTrace=new Audio('callResponses/trace3-xxx-fleet.mp3');
            }
            else {
                var pickupCallTrace=new Audio('callResponses/trace-xxx-fleet.mp3');
                pickupCallTrace.addEventListener("ended", function() {
                    timeoutHowler();
                    pickupCallTrace.play();
  }
}
            break;
        case "*69":
            var pickupStar69=new Audio('callResponses/return-xxx-fleet.mp3');
            pickupStar69.addEventListener("ended", function() {
                timeoutHowler();
                pickupStar69.play();
}
}
            break;
        case "police":
            var pickupPolice=new Audio('callResponses/policePickup.wav');
            pickupPolice.addEventListener("ended", function() {
                timeoutHowler();
                pickupPolice.play();
                var policeComplaint=prompt("Police Department, Sergeant Duffy Speaking.");
                confirm("Really? You say that "+policeComplaint);
}
}
            var policeHangup=new Audio('callResponses/policeHangup.wav');
            policeHangup.addEventListener("ended", function() {
                timeoutHowler();
            }
}
            break;
        default:
            var pickupDefault;
            if(number.length>7){
                pickupDefault=new Audio('callResponses/ldcircuits-bell-f1.mp3');
            }
            else {
                pickupDefault=new Audio('callResponses/completeordc-xxx-fleet.mp3');
            pickupDefault.addEventListener("ended", function() {
                timeoutHowler();
            pickupDefault.play();
}
}
            break;
    }
}

Can we see where all the issues are at?
coming back to this message...
 
Which line are you referring to where the callback function is right, but I need to select the right event type?
To answer your question: This is what I was referring to:
"ended"... which I called out specifically in my statement
Code:
I don't believe there is an event called "ended"...you may want to double check. but yes, 'click' is a valid event, and yes, please add that callback function
 
How's this?
JavaScript:
//grab the button 'hookSwitch'
var hookSwitch = document.querySelector('button.hookSwitch');

//create an event listener for a click event
hookStatus.addEventListener("onclick", function(){
    //inside of the callback function for click event listener, add the on/off classes to the span like this:
    //grab the span element
    var hookStatus = document.querySelector('span.hookStatus');

    //grab check the current status class "on/off", if "on", remove and add "off", otherwise do the same if "on"
    if ( hookStatus.classlist.contains('off') ){
        //remove 'off' class
        hookStatus.classlist.remove('off');
        //add 'on' class
        hookStatus.classlist.add('on');
        //change span text
        hookStatus.textContent = "Off Hook";
    }
    else {
        if ( hookStatus.classlist.contains('on') ){
            //remove 'on' class
            hookStatus.classlist.remove('on');
            //add 'off' class
            hookStatus.classlist.add('off');
            //change span text
            hookStatus.textContent = "Off Hook";
        }
    }
});
var dialTone=new Audio('file:///M:/Documents/Virtual%20Phone/Call%20Progress%20Tones/Dial%20Tone/USA%20Dial%20Tone.ogg');
var isOffHook=false;
var callIncoming=false;
var allowDial = true;
var ringingTone=new Audio('Ringing Tone/Princess%20702B%20Bell%20Ring.ogg');
var timesRung=0;
var availableNumbers=["0","611","711","811","911","*67 + 1 (847) 765-1008","1 (847) 765-1008","867-5309",
                        "1 (212) 456-1414","555-1212","555-5555","748-0900","650-0050","650-8950",
                        "970-3920","1 (714) 733-9969","*57","*69"];


function reload(){
    location.reload(true);
}

document.getElementById('toggleLineStatus').onclick=function(){
    toggleLineStatus()
};

function toggleLineStatus() {
    var number="";
    var pin="";
    var checkForPin=false;
    document.getElementById('numberbeingdialed').innerHTML=number;
    var wasOnHook=false;

    if(!offHook){
        offHook=true;
        document.getElementById('hookstatus').innerHTML="Off";
        wasOnHook=true;
    } else {
        offHook=false;
        document.getElementById('hookstatus').innerHTML="On";
        clunk.pause();
        ringback.pause();
        clunk.currentTime=0;
        ringback.currentTime=0;
    }
 
    if(ringbackDialed){
        startRingback();
    } else {
        if(wasOnHook){
            ring.pause();
            ring.currentTime=0;
            playDialTone();
            dialingAllowed=true;
            nextDigitDialable=true;
            ringbackDialed=false;
            keepPlaying=true;
        }
        else {
            stopDialTone();
            setOpacity(100);
            allCircuitsBusy=false;
            keepPlaying=false;
        }
    }
}

function numberSuggestion(){
    var randomNumber=Math.floor(Math.random()*(availableNumbers.length));
    var suggestedNumber=availableNumbers[randomNumber];
    document.getElementById("suggestion").innerHTML="How about dialing <strong id='suggestedTelephoneNumber'>"+
                                                    suggestedNumber+
                                                    "</strong>? Don't like this number? Click the button above again!";
}

function receiverRaised(){
    if(allowDial == false) {
        telephoneAnswered()
    }
 
    if(allowDial == true) {
        dialTone.play();
    } else {
        offHook ();
        timeoutHowler.play();
    }
}

setCallTimeout();

function setCallTimeout(){
    var delay=5000;
    var delayCaller=Math.floor((Math.random()*8000)+1);
    delay=delay+delayCaller;
    setTimeout(incomingCall,delay);
}

function offHook(){
    isOffHook=true;
    document.getElementById("WE2500").style.display="none";
    document.getElementById("dialPad").style.display="block";
}

function dialToneTimedOut() {
    allowDial=false;
    timeoutHowler();
    if(DialToneTimedOut == true) {
        timeoutHowler.play();
        timeoutHowler.currentTime=0;
    }
}

function incomingCall(){
    var ringRing=new Audio('Ringing Tone/Princess%20702B%20Bell%20Ring.ogg');
    var hasTelephoneBeenAnswered=false;
    ringTelephone();
}

function ringTelephone(){
    if(!hasTelephoneBeenAnswered == false) {
        ringRing.play();
        ringRing.currentTime=0;
    }
 
    else {
    if(isOffHook == false) {
        ringRing.play();
    }
 
    if(allowDial == false) {
        callIncoming=true;
        setInterval(ringTelephone,5500);
    }
}

var number="";
var timeout="";

function numberDial() {
    if(dialTone){
        dialTone.pause();
        dialTone.currentTime=0
    }
}

function dial1() {
    if(allowDial == true) {
        numberDial();
        number=number+"1";
        var DTMFToneDial1=new Audio('file:///M:/Documents/Virtual%20Phone/DTMF%20Tone%20Dials/DTMF%20Tone%20Dial%201.ogg');
        DTMFToneDial1.play();
    }
}

function dial2() {
    if(allowDial == true); {
        numberDial();
        number=number+"2";
        var DTMFToneDial2=new Audio('file:///M:/Documents/Virtual%20Phone/DTMF%20Tone%20Dials/DTMF%20Tone%20Dial%202.ogg');
        DTMFToneDial2.play();
    }
}

function dial3() {
    if(allowDial == true); {
        numberDial();
        number=number+"3";
        var DTMFToneDial3=new Audio('file:///M:/Documents/Virtual%20Phone/DTMF%20Tone%20Dials/DTMF Tone Dial 3.ogg');
        DTMFToneDial3.play();
    }
}

function dial4() {
    if(allowDial == true) {
        numberDial();
        number=number+"4";
        var DTMFToneDial4=new Audio('file:///M:/Documents/Virtual%20Phone/DTMF%20Tone%20Dials/DTMF Tone Dial 4.ogg');
        DTMFToneDial4.play();
    }
}

function dial5() {
    if(allowDial == true) {
        numberDial();
        number=number+"5";
        var DTMFToneDial5=new Audio('file:///M:/Documents/Virtual%20Phone/DTMF%20Tone%20Dials/DTMF Tone Dial 5.ogg');
        DTMFToneDial5.play();
    }
}

function dial6() {
    if(allowDial == true) {
        numberDial();
        number=number+"6";
        var DTMFToneDial6=new Audio('file:///M:/Documents/Virtual%20Phone/DTMF%20Tone%20Dials/DTMF Tone Dial 6.ogg');
        DTMFToneDial6.play();
    }
}

function dial7() {
    if(allowDial == true) {
        numberDial();
        number=number+"7";
        var DTMFToneDial7=new Audio('file:///M:/Documents/Virtual%20Phone/DTMF%20Tone%20Dials/DTMF Tone Dial 7.ogg');
        DTMFToneDial7.play();
    }
}

function dial8() {
    if(allowDial == true) {
        numberDial();
        number=number+"8";
        var DTMFToneDial8=new Audio('file:///M:/Documents/Virtual%20Phone/DTMF%20Tone%20Dials/DTMF Tone Dial 8.ogg');
        DTMFToneDial8.play();
    }
}

function dial9() {
    if(allowDial == true) {
        numberDial();
        number=number+"9";
        var DTMFToneDial9=new Audio('file:///M:/Documents/Virtual%20Phone/DTMF%20Tone%20Dials/DTMF Tone Dial 9.ogg');
        DTMFToneDial9.play();
    }
}

function dialStar() {
    if(allowDial == true) {
        numberDial();
        number=number+"*";
        var DTMFToneDialStar=new Audio('file:///M:/Documents/Virtual%20Phone/DTMF%20Tone%20Dials/DTMF Tone Dial Star.ogg');
        DTMFToneDialStar.play();
    }
}

function dial0() {
    if(allowDial == true) {
        numberDial();
        number=number+"0";
        var DTMFToneDial0=new Audio('file:///M:/Documents/Virtual%20Phone/DTMF%20Tone%20Dials/DTMF Tone Dial 0.ogg');
        DTMFToneDial0.play();
    }
}

function dialPound(){
    if(allowDial == true) {
        numberDial();
        number=number+"#";
        var DTMFToneDialPound=new Audio('file:///M:/Documents/Virtual%20Phone/DTMF%20Tone%20Dials/DTMF Tone Dial Pound.ogg');
        DTMFToneDialPound.play();
    }
}

//FOCUS HERE
document.onkeydown = function (event) {

    switch (event.keycode) {
        case 32:
button.addEventListener('click', function() {
            toggleLineStatus();
}
            break;
        case 49,97:
button.addEventListener('click', function() {
            dial1();
}
            break;
        case 50,98:
button.addEventListener('click', function() {
            dial2();
}
            break;
        case 51,99:
button.addEventListener('click', function() {
            dial3();
}
            break;
        case 52,100:
button.addEventListener('click', function() {
            dial4();
});
            break;
        case 53,101:
button.addEventListener('click', function() {
            dial5();
});
            break;
        case 54,102:
button.addEventListener('click', function() {
            dial6();
});
            break;
        case 55,103:
button.addEventListener('click', function() {
            dial7();
});
            break;
        case 56,104:
button.addEventListener('click', function() {
            dial8();
});
            break;
        case 57,105:
button.addEventListener('click', function() {
            dial9();
});
            break;
        case 106:
button.addEventListener('click', function() {
            dialStar();
});
            break;
        case 48,96:
button.addEventListener('click', function() {
            dial0();
});
            break;
        case 109:
button.addEventListener('click', function() {
            dialPound();
});
            break;
        default:
            hasDialedNumber = false;
            break;
    });
    }
//END FUCUS HERE

//FOCUS HERE #2
function ring(){
    ringingTone.play();
    timesRung++;
    if(timesRung>1) {
        setTimeout(response,700);
    }
}

function dial(){
    allowDial=false;
    ring();
    setTimeout(ring,4000);
    }
    }

function busy() {
    busyTone();
    }
    }

function busyTone() {
    var pickupBusy=new Audio('file:///M:/Documents/Virtual%20Phone/Call%20Progress%20Tones/Busy%20Tone/USA%20Busy%20Tone.ogg');
    pickupBusy.play();
    pickupBusy.currentTime=0;
    setInterval(busyTone,4000);
    }
    }

                function operatorPutCallThrough() {
                operatorPickup.play(true);
    }
    }

//END FOCUS HERE #2

//FOCUS HERE #3
function response(){
    switch(number) {
        case "0":
            var operatorPickup=new Audio('callResponses/OperatorAnswer.wav');
            operatorPickup.addEventListener("click", function(){
                number=prompt("Operator, your number please? (Numbers only; enter 'police' for police and emergency)");
                if(number==null){
                    number="0";
                }
            });
            break;
        case "611":
            var pickup611=new Audio('callResponses/611.wav');
            pickup611.addEventListener("click", function(){
                timeoutHowler();
                pickup611.play();
}
            });
            break;
        case "711":
            var pickup711=new Audio('callResponses/tdd-1.mp3');
            pickup711.addEventListener("click", function(){
                timeoutHowler();
            pickup711.play();
}
});
            break;
        case "811":
            var pickup811=new Audio('callResponses/811.wav');
            pickup811.addEventListener("click", function() {
                timeoutHowler();
                pickup811.play();
}
});
            break;
        case "911":
            var pickup911=new Audio('callResponses/911-xxx-fleet.mp3');
            pickup911.addEventListener("click", function() {
                timeoutHowler();
                pickup911.play();
}
});
            break;
        case "18477651008":
            var pickupMCI=new Audio('callResponses/MCI.wav');
            pickupMCI.addEventListener("click", function(){
                timeoutHowler();
            pickupMCI.play();
}
});
            break;
        case "8675309":
            var pickup8675309=new Audio('callResponses/discoornis-bell-f1.mp3');
            pickup8675309.addEventListener("click", function(){
                timeoutHowler();
                pickup8675309.play();
}
});
            break;
        case "12124561414":
            pickup12124561414.addEventListener("click", function() {
                busy();
            pickup12124561414.play();
}
});
            break;
        case "5551212":
            pickup5551212.addEventListener("click", function() {
                busy();
            pickup5551212.play();
}
});
            break;
        case "5555555":
            var pickup5555555=new Audio('callResponses/timeout-xxx-fleet.mp3');
            pickup5555555.addEventListener("click", function() {
                timeoutHowler();
                pickup5555555.play();
}
});
            break;
        case "7480900":
            var pickupSelf=new Audio('callResponses/partyline-xxx-fleet.mp3');
            pickupSelf.addEventListener("click", function() {
                busy();
            pickupSelf.play();
}
});
            break;
        case "18005820655":
            pickup18005820655.addEventListener("click", function() {
                busy();
            pickup18005820655.play();
}
});
            break;
        case "6508950":
            var pickupAM=new Audio('callResponses/answering-machine-1.mp3');
            pickupAM.addEventListener("click"), function() {
            pickupAM.play();
}
});
            break;
        case "6500050":
            var pickupModem=new Audio('modem.wav');
            pickupModem.addEventListener("click"), function() {
            pickupModem.play();
}
});
            break;
        case "9703920":
            var pickupFax=new Audio('fax-1.mp3');
            pickupFax.addEventListener("click"), function() {
            pickupFax.play();
}
});
            break;
        case "17147339969":
            var pickup714=new Audio('device-conference.mp3');
            pickup714.addEventListener("click"), function() {
            pickup714.play();
}
});
            break;
        case "*8217147339969":
            var pickup*8217147339969=new Audio('device-conference.mp3');
            pickup *8217147339969.play();
}
});
            break;
        case "*6717147339969":
            var pickup714block=new Audio('callResponses/reject2-xxx-fleet.mp3');
            pickup714block.addEventListener("click", function() {
                timeoutHowler();
                pickup714block.play();
  }
});
            break;
        case "*57":
            var randNum57=Math.random()>=0.5;
            if(randNum57) {
                var pickupCallTrace=new Audio('callResponses/trace3-xxx-fleet.mp3');
            }
            else {
                var pickupCallTrace=new Audio('callResponses/trace-xxx-fleet.mp3');
                pickupCallTrace.addEventListener("click", function() {
                    timeoutHowler();
                    pickupCallTrace.play();
  }
});
            break;
        case "*69":
            var pickupStar69=new Audio('callResponses/return-xxx-fleet.mp3');
            pickupStar69.addEventListener("click", function() {
                timeoutHowler();
                pickupStar69.play();
}
});
            break;
        case "police":
            var pickupPolice=new Audio('callResponses/policePickup.wav');
            pickupPolice.addEventListener("click", function() {
                timeoutHowler();
                pickupPolice.play();
                var policeComplaint=prompt("Police Department, Sergeant Duffy Speaking.");
                confirm("Really? You say that "+policeComplaint);
}
}
            var policeHangup=new Audio('callResponses/policeHangup.wav');
            policeHangup.addEventListener("click", function() {
                timeoutHowler();
            }
});
            break;
        default:
            var pickupDefault;
            if(number.length>7){
                pickupDefault=new Audio('callResponses/ldcircuits-bell-f1.mp3');
            }
            else {
                pickupDefault=new Audio('callResponses/completeordc-xxx-fleet.mp3');
            pickupDefault.addEventListener("click", function() {
                timeoutHowler();
            pickupDefault.play();
}
});
            break;
    }
}

//END FOCUS HERE #3
 
Last edited by a moderator:
Back
Top Bottom