When I click on a link, it displays the result in a div called 'results.' When I click on another link, it displays the result in the same div without clearing the previous

results. This is my code, how can I get it tidy and only display needed result. I tried

const data = document.getElementById("data");
data.innerHTML = '';

But it didn't work.

Here's my code:

const displayItem = (item, value) => {
  const pre_data = document.createElement('pre');
  const dt_data = document.createElement('dt');
  dt_data.textContent = item;
  pre_data.appendChild(dt_data);
  if (value !== 'undefined') {
    const dd_data = document.createElement('dd')

    if (item == "url") {
      const link = document.createElement('a');
      link.textContent = value;
      link.setAttribute('href', '#')
      link.addEventListener('click', function(e) {
        console.log("I'm working!")
        console.log(e.target.innerHTML)
        fetchData(e.target.innerHTML)
      });
      dd_data.appendChild(link);

    } else {
      dd_data.textContent = value;

    }

    pre_data.appendChild(dd_data);

    if (item == "link") {
      const text = document.createElement('a');
      text.textContent = value;
      text.setAttribute('href', '#')
      text.addEventListener('click', function(e) {
        console.log("I'm working!")
        console.log(e.target.innerHTML)
        fetchData(e.target.innerHTML)
      });
      dd_data.appendChild(text);
    } else {}

    pre_data.appendChild(dd_data);
  }
  return pre_data;
}
const formatResult = (entity, level) =>{
  const dl = document.createElement('dl');


  for(let k in obj) {
    if(typeof obj[k]=== "object"  ){
      dl.appendChild(displayItem(k))
      
      if(Array.isArray(obj[k])){
        obj[k].forEach(results =>  
          {
          if(typeof results=== "object"  ){           
              dl.appendChild(formatResult(results) ) 
             

          }
        
        else{
          dl.appendChild(displayItem(results))
        }
        
        }
          
          );

      } else{
        dl.appendChild(formatResult(obj[k]))
      }
    } else {
      dl.appendChild(displayItem(k, obj[k]))
      
    }
  }

 return dl;

}

//empty div
const myData = document.getElementById("myData");
results.innerHTML = '';


function fetchData(url){
 
  fetch(url)
.then((res) => (res.ok ? res.json() : Promise.reject(res)))
.then((data) => {
  console.log(JSON.stringify(data))
     myData.append(formatResult(data))
    }
})
.catch(console.error);
}

const showResult=document.getElementById("showResult");

catalog.addEventListener("onclick",  fetchData(`localhost:8000/data`));

What my html div looks like:

<button id="showResult">View Result</button>
<div id="myData"></div>

CodePudding user response：

You need to clear on every time where you fetch again new data. So you can add: data.innerHTML = ''; to your fetch function.

function fetchData(url) {
  data.innerHTML = '';
   ...
}

CodePudding user response：

You need to replace data in your response function.

function fetchData(url){
 
  fetch(url)
.then((res) => (res.ok ? res.json() : Promise.reject(res)))
.then((data) => {
  console.log(JSON.stringify(data))
     myData.innerHTML = formatResult(data);
    }
})
.catch(console.error);
}