consolidate javascript function by passing a variable from html object ID such as button ID

Question

Trying to consolidate these three sub functions into one sub function by passing along a variable from the button itself. I currently have four buttons and each button triggers the primary function. Inside the primary function I have the three sub-functions that changes the contents of the div with one of three new html variables. So each button can then change out the div to its own respective content. This code is working now for me no problems, but I figure there has to be a way to just make that sub-function into just one function instead of three by setting the .replaceWith to a global variable. That inside the function there would be a getter that checks the ID of the button that was clicked and passes it to that replaceWith instead.

<script>
$(document).ready(function(){
    $("button.first").click(function(){
        $('div.switchMeOut').replaceWith(firstHTML);
    });
    $("button.second").click(function(){
        $('div.switchMeOut').replaceWith(secondHTML);
    });

    $("button.third").click(function(){
        $('div.switchMeOut').replaceWith(thirdhtml);
    });

});
var firstHTML = '<div class="switchMeOut"><p>First Section Content</div>';
var secondHTML = '<div class="switchMeOut"><p>Second Section Content</div>';
var thirdHTML = '<div class="switchMeOut"><p>Third Section Content</div>'; 
</script>


<body>
<div id="parentblock">
    <h5>Contacts List</h5>
    <div class="switchMeOut">
    <script> document.write (firstHTML + seconcHTML + thirdHTML); </script>
    </div>
</div>

<button id="firstHTML" class="swapper first">Shows First Only </button>
<button id="seconcHTML" class="swapper second">Shows Second Only </button>
<button id="thirdHTML" class="swapper third">Shows Third Only </button>
</body>

So here is what I think should be next but I am definitely missing something.

<script>
$(document).ready(function(){
    $("button").click(function(){
         // some code here to get the buttons ID element
         // and possibly set a variable to that buttons id.
        var passThis = button#;
        $('div.switchMeOut').replaceWith(passThis);
    });
});

Then have each button have their own id. For example:

<button id="firstHTML" class="swapper first">Shows First Only </button>

Any help on this would be appreciated, I dont quite know what I am missing here but I feel like it's pretty close.

Thanks!

Do you have a fiddle or something to show that's not working? Seems like you've figured it out. — m0meni, Dec 03 '15 at 15:46
Yes, I did find the id of the button with just (this.id) and can even say 'var passThis = this.id' but when I add that to the replaceWith it will just output the buttons ID... so its a bit closer. the next part is to then associate all of that html with that buttons id? — loganpixel, Dec 03 '15 at 16:26
Are you asking for help with getting the ID of the clicked button? — Ben Lorantfy, Dec 03 '15 at 16:26
@MrBurger yes, well I did find that part now by using (this.id). Now how do I associate the correct html section with that button id? As of now, it's changing the div content to just the buttons id (firstHTML). — loganpixel, Dec 03 '15 at 16:31

Ben Lorantfy · Accepted Answer · 2015-12-03T17:12:53.253

0

You can get the ID of the clicked element like this:

var passThis = $(this).attr("id");

But I think you need to do this too:

var htmls = {
    firstHTML: '<div class="switchMeOut"><p>First Section Content</div>',
    secondHTML: '<div class="switchMeOut"><p>Second Section Content</div>',
    thirdHTML: '<div class="switchMeOut"><p>Third Section Content</div>'
}

And then your switching statement would look like this:

$('div.switchMeOut').replaceWith(htmls[passThis]);

Regarding your comments:

htmls is not an array, its an object. It's called an object in javascript, but people also call them dictionaries, hashes, associative arrays, key/value pairs etc. See: https://en.wikipedia.org/wiki/Associative_array

Also you can't "call" an array or object. You call a function. The best way to phrase that would be "I retrieved/got the value at index 3" for arrays and "I retrieved/got the firstHtml property" for objects.

edited Dec 03 '15 at 17:12

answered Dec 03 '15 at 16:27

Ben Lorantfy

963
1
7
19

Thanks, that did the trick! So you turned the sections into an array, – loganpixel Dec 03 '15 at 16:48
It's actually not an array. It's an object, but it's using a special syntax with the square brackets that lets you pass in a string. You can also access the properties by using `htmls.firstHTML` , `htmls.secondHTML`, etc. `htmls.firstHtml` is the same as doing `htmls["firstHtml"]` – Ben Lorantfy Dec 03 '15 at 16:53
Thanks for the help! I did learn I can use htmls.first when I ran the document.write on page load to show them all. Thinking it was an array. So was the magic that made it work in the replaceWith by calling the object and its appropriate matching string? – loganpixel Dec 03 '15 at 16:56
Thanks again for the help, turned out quite excellent and thanks for the additional info so I could understand how it worked as well. Cheers :D – loganpixel Dec 04 '15 at 22:03

score -1 · Answer 2 · answered Dec 03 '15 at 16:40

You can use "eval('variablename') to get the value of the variable. However you can also use eval to get a reference to an object with that ID "eval('id')". So the first thing to do is change the ID of your buttons to a data attribute. Instead of "id='firstHTML'" make it "data-id='firstHTML'". So that when you eval("firstHTML") it knows you mean the variable and not the button object.

And you can get rid of the inline script tag in the "switchMeOut" div and load that using jquery in the same document.ready function.

Heres a fiddle showing it working: http://jsfiddle.net/ub8wz5Lb/

HTML:

<div id="parentblock">
    <h5>Contacts List</h5>
    <div class="switchMeOut">
    </div>
</div>

<button data-id="firstHTML" class="swapper first">Shows First Only </button>
<button data-id="secondHTML" class="swapper second">Shows Second Only </button>
<button data-id="thirdHTML" class="swapper third">Shows Third Only </button>

Javascript:

var firstHTML = '<div class="switchMeOut"><p>First Section Content</div>';
var secondHTML = '<div class="switchMeOut"><p>Second Section Content</div>';
var thirdHTML = '<div class="switchMeOut"><p>Third Section Content</div>'; 

$(document).ready(function(){
    $("button").click(function(){
      var id = $(this).data("id");
      $('div.switchMeOut').html(eval(id));
    });
    $('div.switchMeOut').html(firstHTML + secondHTML + thirdHTML);
});

Why use eval when there are other solutions? Eval is inefficient, difficult to debug, and prone to XSS attacks. See: http://stackoverflow.com/questions/86513/why-is-using-the-javascript-eval-function-a-bad-idea — Ben Lorantfy, Dec 03 '15 at 16:58

consolidate javascript function by passing a variable from html object ID such as button ID

2 Answers2