Advertisement
If you have a new account but are having problems posting or verifying your account, please email us on hello@boards.ie for help. Thanks :)
Hello all! Please ensure that you are posting a new thread or question in the appropriate forum. The Feedback forum is overwhelmed with questions that are having to be moved elsewhere. If you need help to verify your account contact hello@boards.ie

Using one function to toggle text of two button

Options
  • 13-08-2022 2:26pm
    #1
    Sephiroth_dude
    Moderators, Computer Games Moderators, Social & Fun Moderators Posts: 80,273 Mod ✭✭✭✭


    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;
}
    Post edited by Sephiroth_dude on


Comments

Advertisement