Alternative to onClick

multichild · April 30, 2018, 11:53am

I have a lot of these buttons below and then the function below that is reading the values, so Im wondering what the alternative to using onClick is.

<button onClick="showSelectedCountryHideOtherCountries('1','Countrya');">@LH.GetText(LH.SystemComponent.CristalStandards, "btnBrazil_Contact")</button>

function showSelectedCountryHideOtherCountries(continentNumber, countryLetter) {
        var countriesInContinents = ["Countrya", "Countryb", "Countryc", "Countryd", "Countrye", "Countryf", "Countryg"];

        for (i = 1; i <= 4; i += 1) {
            document.querySelectorAll(countriesInContinents.map(country => "#countryWrapper" + country + i))
                .forEach(sub => sub.style.display = "none");
        }

        document.querySelector("#countryWrapper" + countryLetter + continentNumber).style.display = "block";

        return false;
    }

mawburn · April 30, 2018, 11:58am

Event Listeners and Data Attributes

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/data-*

Also, arrays start at 0 in JS. If you start your loop at 1 you’ll miss the first element.

multichild · April 30, 2018, 12:05pm

Thanks Mawburn, would it be cheeky of me to ask if you could show me with the code I put up. I have the 2 parts within the onClick, and just simply not sure.

Is this the right way to start with

<button data-continent-position="1" data-countryinContinent-position="Countrya">

Just then how to I use that in the function if its correct

mawburn · April 30, 2018, 1:03pm

Sure. You have the right idea

<button 
  class="countryBtn"
  data-continent-position="1" 
  data-countryinContinent="Countrya"
>

const countryBtns = document.querySelectorAll('.countryBtn')

countryBtns.forEach(btn => 
  btn.addEventListner('click', countryBtnClickHandler)
)

function countryBtnClickHandler() {
  const clickedPos = this.data.set.position
  const clickedCountry = this.dataset.countryinContinent

  btns.forEach(btn => {
    // do stuff
  })
}

I’m a little confused at what you’re trying to do with your display: none. Can you tell me what you’re trying to achieve with that?

multichild · April 30, 2018, 1:57pm

Thanks for coming back, and ye whats happening is that on page load for continents in the form of graphical maps are displayed, and the idea is when any of the continents are clicked, the relevant countries are displayed, so what the display:none is doing is saying close all the countries up except for this one that you clicked.

As an example and its very similar is here - The maps

Its the map area at the bottom.

What I could do is put up a bigger version of what I have.

These are the continents

<div class="section group">
                <div class="col span_1_of_4">
                    <a onClick="showHideContinentCountries(1);" id="americasMap">
                        <img src="/Images/Locale-Specific/@(LH.CurrentLanguageID)/Contact/Americas_Grey.png"
                             onMouseOver="this.src='/Images/Locale-Specific/@(LH.CurrentLanguageID)/Contact/Americas.png'"
                             onMouseOut="this.src='/Images/Locale-Specific/@(LH.CurrentLanguageID)/Contact/Americas_Grey.png'" />
                    </a>
                </div>

                <div class="col span_1_of_4">
                    <a onClick="showHideContinentCountries(2);" id="europeMap">
                        <img src="/Images/Locale-Specific/@(LH.CurrentLanguageID)/Contact/Europe_Grey.png"
                             onMouseOver="this.src='/Images/Locale-Specific/@(LH.CurrentLanguageID)/Contact/Europe.png'"
                             onMouseOut="this.src='/Images/Locale-Specific/@(LH.CurrentLanguageID)/Contact/Europe_Grey.png'" />
                    </a>
                </div>

                <div class="col span_1_of_4">
                    <a onClick="showHideContinentCountries(3);" id="middleEastMap">
                        <img src="/Images/Locale-Specific/@(LH.CurrentLanguageID)/Contact/Middle_East_&_Africa_Grey.png"
                             onMouseOver="this.src='/Images/Locale-Specific/@(LH.CurrentLanguageID)/Contact/Middle_East_&_Africa.png'"
                             onMouseOut="this.src='/Images/Locale-Specific/@(LH.CurrentLanguageID)/Contact/Middle_East_&_Africa_Grey.png'" />
                    </a>
                </div>

                <div class="col span_1_of_4">
                    <a onClick="showHideContinentCountries(4);" id="asiaMap">
                        <img src="/Images/Locale-Specific/@(LH.CurrentLanguageID)/Contact/Asia_Grey.png"
                             onMouseOver="this.src='/Images/Locale-Specific/@(LH.CurrentLanguageID)/Contact/Asia.png'"
                             onMouseOut="this.src='/Images/Locale-Specific/@(LH.CurrentLanguageID)/Contact/Asia_Grey.png'" />
                    </a>
                </div>
            </div>

This then is the countries that relate to the first continent, so there 4 of these

<div id="continent1Countries">
                <button class="showSelectedCountryHideOtherCountries" data-continent-position="1" data-countryinContinent-position="Countrya">
                @LH.GetText(LH.SystemComponent.CristalStandards, "btnBrazil_Contact")
                    </button> | 
                <button onClick="showSelectedCountryHideOtherCountries('1','Countryb');">
                @LH.GetText(LH.SystemComponent.CristalStandards, "btnCostaRica_Contact")
                    </button> | 
                <button onClick="showSelectedCountryHideOtherCountries('1','Countryc');">
                @LH.GetText(LH.SystemComponent.CristalStandards, "btnDominicanRepublic_Contact")
                    </button> | 
                <button onClick="showSelectedCountryHideOtherCountries('1','Countryd');">
                @LH.GetText(LH.SystemComponent.CristalStandards, "btnJamaica_Contact")
                    </button> | 
                <button onClick="showSelectedCountryHideOtherCountries('1','Countrye');">
                @LH.GetText(LH.SystemComponent.CristalStandards, "btnMexico_Contact")
                </button>
            </div>

<div id="continent2Countries">
                <button onClick="showSelectedCountryHideOtherCountries('2','Countrya');">@LH.GetText(LH.SystemComponent.CristalStandards, "btnUK_Contact")</button> | 
                <button onClick="showSelectedCountryHideOtherCountries('2','Countryb');">@LH.GetText(LH.SystemComponent.CristalStandards, "btnFrance_Contact")</button> | 
                <button onClick="showSelectedCountryHideOtherCountries('2','Countryc');">@LH.GetText(LH.SystemComponent.CristalStandards, "btnGreece_Contact")</button> | 
                <button onClick="showSelectedCountryHideOtherCountries('2','Countryd');">@LH.GetText(LH.SystemComponent.CristalStandards, "btnItaly_Contact")</button> | 
                <button onClick="showSelectedCountryHideOtherCountries('2','Countrye');">@LH.GetText(LH.SystemComponent.CristalStandards, "btnSpain_Contact")</button> | 
                <button onClick="showSelectedCountryHideOtherCountries('2','Countryf');">@LH.GetText(LH.SystemComponent.CristalStandards, "btnTurkey_Contact")</button>
            </div>

Then I have this function which works with the continents,

function showHideContinentCountries(ContinentMapPositionInt) {
        var numberofContinents = 4;
        for (i = 1; i <= numberofContinents; i++) {
            document.getElementById('countryWrapperCountrya' + i).style.display = 'none';

            if (i == ContinentMapPositionInt) {
                document.getElementById('continent'+ i +'Countries').style.display = 'block';
                document.getElementById('continent' + i).style.display = 'block';
            } else {
                document.getElementById('continent' + i + 'Countries').style.display = 'none';
                document.getElementById('continent' + i).style.display = 'none';
            }
        }

        return false;
    }

And then the function we working on now is dealing with the showing of the countries within the continents

function showSelectedCountryHideOtherCountries(continentNumber, countryLetter) {
        var countriesInContinents = ["Countrya", "Countryb", "Countryc", "Countryd", "Countrye", "Countryf", "Countryg"];
        var numberofContinents = 4;
        for (i = 1; i <= numberofContinents; i += 1) {
            document.querySelectorAll(countriesInContinents.map(country => "#countryWrapper" + country + i))
                .forEach(sub => sub.style.display = "none");
        }

        document.querySelector("#countryWrapper" + countryLetter + continentNumber).style.display = "block";

        return false;
    }

Which with your help is slowly morphing into

const countryBtns = document.querySelectorAll('.showSelectedCountryHideOtherCountries');
    countryBtns.forEach(btn =>
        btn.addEventListner('click', countryBtnClickHandler)
    )

    function countryBtnClickHandler() {
        const clickedPos = this.data.set.position
        const clickedCountry = this.dataset.countryinContinent


        var countriesInContinents = ["Countrya", "Countryb", "Countryc", "Countryd", "Countrye", "Countryf", "Countryg"];
        var numberofContinents = 4;
        for (i = 1; i <= numberofContinents; i += 1) {
            document.querySelectorAll(countriesInContinents.map(country => "#countryWrapper" + country + i))
                .forEach(sub => sub.style.display = "none");
        }

        document.querySelector("#countryWrapper" + clickedCountry + clickedPos).style.display = "block";

        return false;
    }

So just trying to put your saying into that last function, Im part the way there

I have changed the data identifies to below

<button class="showSelectedCountryHideOtherCountries" data-continentPosition="1" data-countryinContinentPosition="Countrya">

const countryBtns = document.querySelectorAll('.showSelectedCountryHideOtherCountries');
    countryBtns.forEach(btn =>
        btn.addEventListner('click', countryBtnClickHandler)
    )

function countryBtnClickHandler() {
        const clickedPos = this.data.continentPosition
        const clickedCountry = this.data.countryinContinentPosition

        alert(clickedPos);

When I click the one I have adapted I’m not getting the alert, was just trying ot work through the information thats being sent to learn from this too

mawburn · April 30, 2018, 2:20pm

Ok. Try this. You don’t need the first data attribute. You should add a .map class to the div you want to be hidden.

<button class="countryBtn" data-country="Countrya">click me</button>

const countryBtns = document.querySelectorAll('.countryBtn')

countryBtns.forEach(btn => 
  btn.addEventListner('click', countryBtnClickHandler)
)

function countryBtnClickHandler() {
  const country = this.dataset.country
  const maps = document.querySelectorAll('.map')
  
  maps.forEach(map => {
    map.style.display = (map.dataset.country === country) ? 'none' : 'block'
  })
}

ronpat · April 30, 2018, 2:21pm

Brief suggestion:

As an alternative to uploading your images, could you post the full URL to your images OR include a “” URL in the <head> section?

multichild · April 30, 2018, 2:46pm

Yes I can see for sure where your going, just at the moment I cant get it to work.

I’ll post where I’m at now, see if you can see anything

<a onClick="showHideContinentCountries(1);" id="americasMap">
<img src="/Images/Locale-Specific/@(LH.CurrentLanguageID)/Contact/Americas_Grey.png"
onMouseOver="this.src='/Images/Locale-Specific/@(LH.CurrentLanguageID)/Contact/Americas.png'"
onMouseOut="this.src='/Images/Locale-Specific/@(LH.CurrentLanguageID)/Contact/Americas_Grey.png'" />
</a>

<a onClick="showHideContinentCountries(2);" id="europeMap">
<img src="/Images/Locale-Specific/@(LH.CurrentLanguageID)/Contact/Europe_Grey.png"
onMouseOver="this.src='/Images/Locale-Specific/@(LH.CurrentLanguageID)/Contact/Europe.png'"
onMouseOut="this.src='/Images/Locale-Specific/@(LH.CurrentLanguageID)/Contact/Europe_Grey.png'" />
 </a>

<a onClick="showHideContinentCountries(3);" id="middleEastMap">
<img src="/Images/Locale-Specific/@(LH.CurrentLanguageID)/Contact/Middle_East_&_Africa_Grey.png"
onMouseOver="this.src='/Images/Locale-Specific/@(LH.CurrentLanguageID)/Contact/Middle_East_&_Africa.png'"
onMouseOut="this.src='/Images/Locale-Specific/@(LH.CurrentLanguageID)/Contact/Middle_East_&_Africa_Grey.png'" />

<a onClick="showHideContinentCountries(4);" id="asiaMap">
<img src="/Images/Locale-Specific/@(LH.CurrentLanguageID)/Contact/Asia_Grey.png"
onMouseOver="this.src='/Images/Locale-Specific/@(LH.CurrentLanguageID)/Contact/Asia.png'"
onMouseOut="this.src='/Images/Locale-Specific/@(LH.CurrentLanguageID)/Contact/Asia_Grey.png'" />
</a>


<div id="continent1Countries">
<button class="showSelectedCountryHideOtherCountries" data-countryinContinentPosition="Countrya">
@LH.GetText(LH.SystemComponent.CristalStandards, "btnBrazil_Contact")
</button> | 
 <button class="showSelectedCountryHideOtherCountries" data-countryinContinentPosition="Countryb">
@LH.GetText(LH.SystemComponent.CristalStandards, "btnCostaRica_Contact")
</button> | 
<button class="showSelectedCountryHideOtherCountries" data-countryinContinentPosition="Countryc">
@LH.GetText(LH.SystemComponent.CristalStandards, "btnDominicanRepublic_Contact")
</button> | 
<button class="showSelectedCountryHideOtherCountries" data-countryinContinentPosition="Countryd">
@LH.GetText(LH.SystemComponent.CristalStandards, "btnJamaica_Contact")
</button> | 
<button class="showSelectedCountryHideOtherCountries" data-countryinContinentPosition="Countrye">
@LH.GetText(LH.SystemComponent.CristalStandards, "btnMexico_Contact")
 </button>
</div>

<!-- #region Brazil -->
<div id="countryWrapperCountrya1">
<div class="countryAddress americasAddress map">
@LH.GetText(LH.SystemComponent.CristalStandards, "btnBrazil_Contact")
@Html.Raw(LH.GetText(LH.SystemComponent.CristalStandards, "officeGeneric_Brazil_Address"))
</div>
@{
 ViewBag.GoogleMap = "ChIJ3bPNUVjy";
 }
@Html.Partial("_GoogleMapPartial")
</div>
<!-- #endregion -->

<!-- #region Costa Rica -->            
<div id="countryWrapperCountryb1">
<div class="countryAddress americasAddress map">
@LH.GetText(LH.SystemComponent.CristalStandards, "btnCostaRica_Contact")
@Html.Raw(LH.GetText(LH.SystemComponent.CristalStandards, "officeGeneric_CostaRica_Address"))
</div>
@{
ViewBag.GoogleMap = "ChIJ1YTO5Ct";
 }
@Html.Partial("_GoogleMapPartial")
 </div>

<!-- #endregion -->
<!-- #region Dominican Republic -->
<div id="countryWrapperCountryc1">
<div class="countryAddress americasAddress map">
@LH.GetText(LH.SystemComponent.CristalStandards, "btnDominicanRepublic_Contact")</strong>
@Html.Raw(LH.GetText(LH.SystemComponent.CristalStandards, "officeGeneric_DominicanRepublic_Address"))
</div>
@{
ViewBag.GoogleMap = "ChIJtYrNofphpY4RgfGl6Xbc6OQ";
}
@Html.Partial("_GoogleMapPartial")
</div>          

 <!-- #endregion -->

<!-- #region Jamaica -->
<div id="countryWrapperCountryd1">
<div class="countryAddress americasAddress map">
@LH.GetText(LH.SystemComponent.CristalStandards, "btnJamaica_Contact")
@Html.Raw(LH.GetText(LH.SystemComponent.CristalStandards, "officeGeneric_Jamaica_Address"))
</div>
 @{
ViewBag.GoogleMap = "ChIJNzPygNc-244RdZsOF4G85YM";
}
@Html.Partial("_GoogleMapPartial")
</div>
<!-- #endregion -->

<!-- #region Mexico -->

<div id="countryWrapperCountrye1">
<div class="countryAddress americasAddress map">
@LH.GetText(LH.SystemComponent.CristalStandards, "btnMexico_Contact")
</div>
</div>
<!-- #endregion -->
</div>

That’s the lot for the first continent, I have added the map class to each country, and then there 3 more of these.
My head is spinning now lol

system · July 30, 2018, 9:46pm

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.

Topic		Replies	Views
Replacing onclick in html JavaScript	2	3152	January 23, 2020
Javascript event listener JavaScript	5	721	July 29, 2024
DHTML Button onclick event issue JavaScript	6	3370	October 8, 2014
.onclick not working JavaScript	9	4145	June 26, 2022
Eventlistener JavaScript	11	1012	September 10, 2022

Alternative to onClick

Related topics