Using one function to toggle text of two button

Sephiroth_dude · 13-08-2022 02:26PM #1

Hello,

I am pulling in data from a weather api, and displaying it on a webpage, I have two buttons that when pressed make the text appear/disappear but I have two functions that basically do the same thing, is it possible to do it with just one function and how do I do it ?

function weather1(){
    fetch('https://api.openweathermap.org/data/2.5/weather?lat=53.270962&lon=-9.062691&')
    .then(response => response.json())
    .then(data => {
        let temp1 = document.getElementById("t")
        temp1.textContent = data.main.temp
        console.log(data.main.temp)
        //console.log(data)
    }) 
}

weather1()


function weather2(){
    fetch('https://api.openweathermap.org/data/2.5/forecast?lat=53.270962&lon=-9.062691&)
    .then(response => response.json())
    .then(data => {
        //console.log(data)
        let temp2 = document.getElementById("pop")
        temp2.textContent = data.city.population
        console.log(data.city.population)
    })
} 

weather2()

function toggleText(){
    let text = document.getElementById('heading1')
    if(text.style.display === 'none'){
        text.style.display = 'block'
    }else{
        text.style.display = 'none'
    }
}

function toggleText1(){
    let text1 = document.getElementById('heading2')
    if(text1.style.display === 'none'){
        text1.style.display = 'block'
    }else{
        text1.style.display = 'none'
    }
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Document</title>
</head>
<body>
    <div id="heading1">Temp:<span id="t"></span></div>
    <div id="btn1">
        <button type="button" onclick="toggleText()">Cork</button>
    </div>
    
    <div id="heading2">Population:<span id="pop"></span></div>

    <div id="btn2">
        <button type="button" onclick="toggleText1()">Galway</button>
    </div>
   
    <script src="script.js"></script>
</body>
</html>



#heading1{
    display: none;
}

#heading2{
    display: none;
}

13-08-2022 03:07PM

Don't publish your API keys (appid=...). Anyone can now take those keys and make API calls that will be linked to your account - you'll either be charged or blocked. You should delete that API key from your OpenWeather account and generate a new one.

If this website is going to be publically accessible, it shouldn't even be in the Javascript - you need a server-side solution to use the API key that the Javascript calls.

With regard to the actual question, you can just pass a parameter to the function:

function toggleText(cork){
    let text;
    if(cork)
        text = document.getElementById('heading1')
    else
        text = document.getElementById('heading2')
    if(text.style.display === 'none'){
        text.style.display = 'block'
    }else{
        text.style.display = 'none'
    }
}

And call it like so:

<button type="button" onclick="toggleText(true)">Cork</button>
<!--...-->
<button type="button" onclick="toggleText(false)">Galway</button>

Or if you have a need for multiple options, use a number instead of true/false

Sephiroth_dude · 13-08-2022 03:20PM

Thanks for the reply but it doesn't work.

13-08-2022 07:42PM

https://www.boards.ie/discussion/comment/119467945#Comment_119467945

I believe you're mistaken, but you might get more assistance if you elaborated beyond a simple "it doesn't work"

Idleater · 13-08-2022 09:03PM

For the "similar" methods and code in general, parameterize the differences

function toggleText(someid)

:...

text = document.getElementById(someid)

Sephiroth_dude · 13-08-2022 10:08PM

https://www.boards.ie/discussion/comment/119469250#Comment_119469250

Sorry I should have elaborated and I appreciate you taking the time to reply in the first place, nothing happens when I click the buttons, might be a problem on my end.

13-08-2022 10:20PM

https://www.boards.ie/discussion/comment/119469821#Comment_119469821

Probably a syntax error. What browser? Use F12 to open developer tools, then select "Console", then click one of the buttons, see if any error messages show up. If not, post your current code (minus new API keys, of course)

Using one function to toggle text of two button

Comments