Question

In the following code I want to reduce these 5 functions down to 3.

The first function toggle_visibility() is already made universal by passing the id when I call the function from my html, however, I have to repeat the next two functions thankYouText_Change() and resettxt() because I don’t know how to store the value of the Item variable, nor the p or OK_button variables and pass them to the next function so that they can be used by the other functions.

My goal is to figure out how to reduce these to a set of 3 functions that can be accessed at anytime in my html and applied to any and all relevant elements simply by using onClick="function_foo('desired_element_foo'), without having to have a separate set of functions for each time I want to use them on a different element.

I think that in order to do this I also need to know how to make the variables p and OK_Button have values that will automatically change and be stored based upon the id that I send to them/access them with.

function toggle_visibility(id) {
    var Item = document.getElementById(id);

    if (Item.style.display == 'block') {
        Item.style.display = 'none';
    }
    else {
        Item.style.display = 'block';
    }
}
function thankYouText_Change() {
    var p = document.getElementById("thanksForEmail");
    var OK_Button = document.getElementById("okButton");

    if (p.innerHTML == 'Thank you for submitting your e-mail.') {
        OK_Button.style.display = 'none';
        p.innerHTML = "Returning to page...";
        setTimeout("toggle_visibility('msgSend'), resettxt()", 500);
    }
}
function resettxt() {
    var p = document.getElementById("thanksForEmail");
    var OK_Button = document.getElementById("okButton");

    if (p.innerHTML == 'Returning to page...') {
        p.innerHTML = 'Thank you for submitting your e-mail.';
        OK_Button.style.display = 'block';
    }
}
//Start of repeated functions for second div and button elements
function thankYouText_Change2() {
    var p = document.getElementById("thanksForEmail2");
    var OK_Button = document.getElementById("okButton2");

    if (p.innerHTML == 'Thank you for submitting your e-mail.') {
        OK_Button.style.display = 'none';
        p.innerHTML = "Returning to page...";
        setTimeout("toggle_visibility('msgSend2'), resettxt2()", 500);
    }
}
function resettxt2() {
    var p = document.getElementById("thanksForEmail2");
    var OK_Button = document.getElementById("okButton2");

    if (p.innerHTML == 'Returning to page...') {
        p.innerHTML = 'Thank you for submitting your e-mail.';
        OK_Button.style.display = 'block';
    }
}

Answer 1

For a first pass, you could simplify this to something like this:

function thankYouText_Change(pId, okId, msgSendId){
    var p = document.getElementById(pId);
    var OK_Button = document.getElementById(okId);

    if(p.innerHTML == 'Thank you for submitting your e-mail.'){
        OK_Button.style.display = 'none';
        p.innerHTML = "Returning to page...";
        setTimeout(function(){
          toggle_visibility(msgSendId);
            resettxt(pId, okId);
        }, 500);
    }
}

function resettxt(pId, okId){
    var p = document.getElementById(pId);
    var OK_Button = document.getElementById(okId);

    if(p.innerHTML == 'Returning to page...'){
    p.innerHTML = 'Thank you for submitting your e-mail.';
    OK_Button.style.display = 'block';}
}

And then for each set of elements on the page, you just need to call thankYouText_Change with the correct IDs for each of the 3 related elements.

For a 2nd pass, you could simplify both of my above functions into one, so that you don’t need to re-call document.getElementById on the same elements more than once (not significant, but I also like to declare everything with var – variables and functions alike):

var thankYouText_Change = function(pId, okId, msgSendId){
    var p = document.getElementById(pId);
    var OK_Button = document.getElementById(okId);

    if(p.innerHTML == 'Thank you for submitting your e-mail.'){
        OK_Button.style.display = 'none';
        p.innerHTML = "Returning to page...";
        setTimeout(function(){
          toggle_visibility(msgSendId);
            if(p.innerHTML == 'Returning to page...'){
                p.innerHTML = 'Thank you for submitting your e-mail.';
                OK_Button.style.display = 'block';
            }
        }, 500);
    }
}

(Note that this eliminates the need for a resettxt function.)