Setting text using innerHTML

#1

I am trying to set the title for each of my graphs but for some reason I can only set the first graph’s title.

I am using an OOP approach, so I have the main.js file which does all data manipulation and then creates a new object using a constructor function. That constructor function gets data and graph title (among other arguments). Then a method on constructor function creates the graph using those arguments.

For some reason, only the first graph is getting a title. And interestingly, it is getting the title associated with the last invocation of the constructor function using new keyword.

Relevant code from main.js:

slopeGraphKPK = new SlopeGraph(

    "#chart1",

    updatedKPKData,

    dataKPKDomain,

    provNameKPK

  );

  slopeGraphPunjab = new SlopeGraph(

    "#chart2",

    updatedPunjabData,

    dataPunjabDomain,

    provNamePunjab

  );

  slopeGraphICT = new SlopeGraph(

    "#chart3",

    updatedICTData,

    dataICTDomain,

    provNameICT

  );

  slopeGraphSindh = new SlopeGraph(

    "#chart4",

    updatedSindhData,

    dataSindhDomain,

    provNameSindh

  );

  slopeGraphBaloch = new SlopeGraph(

    "#chart5",

    updatedBalochData,

    dataBalochDomain,

    provNameBaloch

  );

Code from mainSlopeGraph.js:

SlopeGraph = function(_parentElement, _someData, _someDomain, _provName) {

  this.parentElement = _parentElement;

  this.provData = _someData;

  this.scaleDomain = _someDomain;

  this.provName = _provName;

  this.initVis();

};

SlopeGraph.prototype.initVis = function() {

  let vis = this;

  //START HERE: Only first shart is showing province name;

  //and that is only the last one sent in from main.js

  $("#provinceName").text(vis.provName);

  // $("#provinceName").textContent = vis.provName;

  // $("#provinceName").innerText = vis.provName;

  // $("#provinceName").innerHTML = vis.provName;

//Other code that sets up axes etc...
.
.
.
}

I tried a bunch of different things but only un-commented out the one that is giving me the results described in this post. The rest resulted in no title at all. I was trying all these suggestions: https://www.w3schools.com/jsref/prop_node_textcontent.asp.

This is an old version of the code but will give an idea of the larger project, if that is helpful: https://github.com/SabahatPK/Data4Pakistan_SlopeGraphs

Thank you.

#2

Are all your classes trying to change the same div text?
If so, here’s your error.

If you have n graphs that should go into n containers, then each Class should update only its specific container.

The way you have set it up every new class is updating the same container, thus it will show only the last value run.

Hope this helps :+1:

#3

Hi - thanks @Marmiz.

I tried to fix that but the title tag is still blank. This is the updated code:

HTML:

<div class="col-sm-4 descGraph">
            <h6 id="provinceNameBaloch"></h6>
            <h6 id="provinceNameICT"></h6>
            <h6 id="provinceNamePunjab"></h6>
            <h6 id="provinceNameSindh"></h6>
            <h6 id="provinceNameKPK"></h6>
            <p>Add some words talking about the trend.</p>
          </div>

Them main.js:

 slopeGraphKPK = new SlopeGraph(
    "#chart1",
    updatedKPKData,
    dataKPKDomain,
    "#provNameKPK",
    provNameKPK
  );
  slopeGraphPunjab = new SlopeGraph(
    "#chart2",
    updatedPunjabData,
    dataPunjabDomain,
    "#provNamePunjab",
    provNamePunjab
  );
  slopeGraphICT = new SlopeGraph(
    "#chart3",
    updatedICTData,
    dataICTDomain,
    "#provNameICT",
    provNameICT
  );
  slopeGraphSindh = new SlopeGraph(
    "#chart4",
    updatedSindhData,
    dataSindhDomain,
    "#provNameSindh",
    provNameSindh
  );
  slopeGraphBaloch = new SlopeGraph(
    "#chart5",
    updatedBalochData,
    dataBalochDomain,
    "#provNameBaloch",
    provNameBaloch
  );

Finally, mainSlope.js:

SlopeGraph = function(
  _parentElement,
  _someData,
  _someDomain,
  _provNamePlaceholder,
  _provName
) {
  this.parentElement = _parentElement;
  this.provData = _someData;
  this.scaleDomain = _someDomain;
  this.provNamePlaceholder = _provNamePlaceholder;
  this.provName = _provName;
  this.initVis();
};

SlopeGraph.prototype.initVis = function() {
  let vis = this;

  console.log(vis.provNamePlaceholder);
  console.log(vis.provName);

  //START HERE: Only first shart is showing province name;
  //and that is only the last one sent in from main.js
  $(vis.provNamePlaceholder).text(vis.provName);
  // $("#provinceName").textContent = vis.provName;
  // $("#provinceName").innerText = vis.provName;
  // $("#provinceName").innerHTML = vis.provName;
.
.
.
}

This was the console.log output:

#provNameKPK
mainSlopeGraph.js:20 Khyber Pakhtunkhwa
mainSlopeGraph.js:19 #provNamePunjab
mainSlopeGraph.js:20 Punjab
mainSlopeGraph.js:19 #provNameICT
mainSlopeGraph.js:20 Federal Capital Territory
mainSlopeGraph.js:19 #provNameSindh
mainSlopeGraph.js:20 Sindh
mainSlopeGraph.js:19 #provNameBaloch
mainSlopeGraph.js:20 Balochistan

I also uploaded latest version to github: https://github.com/SabahatPK/Data4Pakistan_SlopeGraphs

And output can be viewed here: https://data-driven-pakistan-data-stories.netlify.com/

#4

Additional change required: Make sure the id of <h6> matches argument given to constructor function.

So if <h6> is: <h6 id="provinceNameBaloch"></h6>, then constructor function should match:

slopeGraphBaloch = new SlopeGraph(
    "#chart5",
    updatedBalochData,
    dataBalochDomain,
    "#provNameBaloch",
    provNameBaloch      // should be provinceNameBaloch
  );

Typos will be the death of me.

#5

Glad you could make it work :smile:

Happy coding!

#6