Potresti utilizzare l'API fetch (javascript) per prelevare i dati da un file json che contiene i vari testi anzichè metterli su file di testo separati.
Lo puoi fare sia con un approccio di elementi fissi con tot elementi (bottoni e div contenitori che ho chiamato item), oppure dinamico in base ai base dati presenti sul file json.
questo è il contenuto del file dati.json prensete nella root del progetto.
codice:{ "div1": "testo 1", "div2": "testo 2", "div3": "testo 3" }codice:<!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"> <title>Document</title> <style> * { box-sizing: border-box; } #container { display: flex; flex: 1 1 0; margin-bottom: 20px; } .item { width: 200px; height: 100px; border: 1px solid red; overflow: auto; padding: 20px; } </style> </head> <body> <div id="container"> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div> <div id="buttons"> <button id="b1">bottone1</button> <button id="b2">bottone2</button> <button id="b3">bottone3</button> </div> <script> const items = document.getElementsByClassName('item') const btn1 = document.getElementById('b1') const btn2 = document.getElementById('b2') const btn3 = document.getElementById('b3') const loadJson = async () => { const fileJson = await fetch('./dati.json') const dataJson = fileJson.json() return dataJson } (async function init() { const objJson = await loadJson() function viewItems(idx, div) { items[idx].textContent = objJson[div] } btn1.addEventListener('click', viewItems.bind(this, 0, "div1")) btn2.addEventListener('click', viewItems.bind(this, 1, "div2")) btn3.addEventListener('click', viewItems.bind(this, 2, "div3")) })() </script> </body> </html>
Mentre per il discorso dinamico potresti fare in questo modo.
codice:<div id="container"></div> <div id="buttons"></div> <script> const container = document.getElementById('container') const items = document.getElementsByClassName('item') const btns = document.getElementById('buttons') const loadJson = async () => { const fileJson = await fetch('./dati.json') const dataJson = fileJson.json() return dataJson } (async function init() { const objJson = await loadJson() function viewItems(idx, div) { items[idx].textContent = objJson[div] } const objJsonCount = Object.keys(objJson).length for (let i = 0; i < objJsonCount; i++) { const myDiv = document.createElement('div') myDiv.setAttribute('class', 'item') container.appendChild(myDiv) const myBtn = document.createElement('button') myBtn.setAttribute('class', 'mybtn') myBtn.textContent = `bottone${i + 1}` btns.appendChild(myBtn) btns.children[i].addEventListener('click', viewItems.bind(this, i, `div${i + 1}`)) } })() </script>
Rispondi quotando