Font Awesome Icon Will Not Append Before Tool Tip

Question

I have created a risk matrix with some simple HTML and very simple JS. There are three different categories where items can get posted to in a tooltip, Red, Yellow, or Green. These all have to do with the Severity(Likelihood * Consequence) of each item posted.

As of now, the information only posts in a tooltip on whichever (x, y) coordinates it belongs, the hassle is the square it is appended to has to be hovered over to show the tool tip, which is kind of inconvenient. I want to append different font awesome icons depending on the severity like so:

This for items appended in Green Squares. This for items appended in Yellow Squares. This for items appended in Red Squares.

In my snippet you can see where I commented out trying to append the first one to test it, it tells me that "236:87 Uncaught TypeError: document.getElementById(...).innerHTML is not a function"

UPDATE Yash provided a working appending method which answers part of the question. In the new updated snippet, I created a conditional to append three different types of Font Awesome Icons based on the values of ConsequencexLikelihood, and now nothing will append to the table

const dataFromFetch = {
  "likelihood" : 4, 
  "consequence": 3, 
  "severity" : 12, 
  "category": "Category Name", 
  "Status": "Active", 
  "Title": "This is the Title of the Occurrence", 
  "Priority": "High"
}

if (dataFromFetch.consequence === 1 && dataFromFetch.likelihood <= 5){
document.getElementById( dataFromFetch.likelihood + '-' + dataFromFetch.consequence ).innerHTML='';
} if (dataFromFetch.consequence === 2 && dataFromFetch.likelihood <= 3){
document.getElementById( dataFromFetch.likelihood + '-' + dataFromFetch.consequence ).innerHTML='';
} if (dataFromFetch.consequence === 3 && dataFromFetch.likelihood <= 2){
document.getElementById( dataFromFetch.likelihood + '-' + dataFromFetch.consequence ).innerHTML='';
} if (dataFromFetch.consequence === 4 && dataFromFetch.likelihood === 1){
document.getElementById( dataFromFetch.likelihood + '-' + dataFromFetch.consequence ).innerHTML='';
} if (dataFromFetch.consequence === 2 && dataFromFetch.likelihood >= 4){
document.getElementById( dataFromFetch.likelihood + '-' + dataFromFetch.consequence ).innerHTML='';
} if (dataFromFetch.consequence === 3 && dataFromFetch.likelihood > 2 && dataFromFetch < 5){
document.getElementById( dataFromFetch.likelihood + '-' + dataFromFetch.consequence ).innerHTML='';
} if (dataFromFetch.consequence === 4 && dataFromFetch.likelihood > 1 && dataFromFetch.likelihood < 4){
document.getElementById( dataFromFetch.likelihood + '-' + dataFromFetch.consequence ).innerHTML='';
} if (dataFromFetch.consequence === 5 && dataFromFetch.likelihood < 3){
document.getElementById( dataFromFetch.likelihood + '-' + dataFromFetch.consequence ).innerHTML='';
} if (dataFromFetch.consequence === 5 && dataFromFetch.likelihood >= 3){
document.getElementById( dataFromFetch.likelihood + '-' + dataFromFetch.consequence ).innerHTML='';
} if (dataFromFetch.consequence === 4 && dataFromFetch.likelihood >= 4){
document.getElementById( dataFromFetch.likelihood + '-' + dataFromFetch.consequence ).innerHTML='';
} if (dataFromFetch.consequence === 3 && dataFromFetch.likelihood === 5){
document.getElementById( dataFromFetch.likelihood + '-' + dataFromFetch.consequence ).innerHTML='';
} 

document.getElementById( dataFromFetch.likelihood + '-' + dataFromFetch.consequence ).innerHTML='';
document.getElementById( dataFromFetch.likelihood + '-' + dataFromFetch.consequence ).title =  
  dataFromFetch.category + '
' + 
  dataFromFetch.Status + '
' + 
  dataFromFetch.Title + '
' +
  dataFromFetch.Priority

.box {
  position: relative;
  background-color: lightgrey;
  color: #fff;
  border-radius: 0px;
  padding: 20px;
  font-size: 150%;
  border: 1px solid black;
}

.wrapper {
  margin: 60px 0 90px 90px;
  display: grid;
  grid-gap: 0;
  grid-template-columns: repeat(5, 100px);
  grid-template-rows: repeat(5, 100px);
  grid-auto-flow: column;
}

#red {
  background-color: red;
}
#yellow {
  background-color: yellow;
}
#green {
  background-color: green;
}
section {
  position: relative;
  width: 600px;
}
p.likelihood {
   transform: rotate(-90deg) translateY(-50%);
   transform-origin: top;
   position: absolute;
   top: 50%;
   left: -20px;
   font-size: 30px;
   margin: 0;
}

p.consequence {
   font-size: 30px;
   position: absolute;
   transform: translateX(-50%);
   left: calc(50% + 45px);
   bottom: -60px;
   margin: 0;
}

.numbers-container {
  position: absolute;
  display: flex;
}

.numbers-container-x {
  padding-top: 10px;
  left: 90px;
  bottom: -25px; 
}

.numbers-container-x .number {
  width: 100px;
  text-align: center;
}

.numbers-container-y {
  flex-direction: column-reverse;
  left: 70px;
  top: 0;
}

.numbers-container-y .number {
  height: 100px;
  line-height: 100px;
}


    
        
        

        
        
        
    
    
    
        
            
            
            
            
            
            
            
            
            
            
            
        
             
            
        
            
            
        
            
            
        
            
            
        
            
            
        
            
            
        
            
            
        
            
            
        
            
            
        
            
            
        
            
            
        
            
            
        
            
            
        
            
            
        
            
            
        
            
            
        
            
            
        
        
            
            
        
            
            
        
            
        
        
        
            1
            2
            3
            4
            5
        
        
        
            1
            2
            3
            4
            5
        
        
        
            Likelihood
        
        
            Consequence

user_13617497 · Answer

You can directly assign a value to innerHTML, as it's not a function. So you need to remove the parenthesis and just simply assign a value to it.

const dataFromFetch = {
  "likelihood" : 4, 
  "consequence": 3, 
  "severity" : 12, 
  "category": "Category Name", 
  "Status": "Active", 
  "Title": "This is the Title of the Occurrence", 
  "Priority": "High"
}
document.getElementById( dataFromFetch.likelihood + '-' + dataFromFetch.consequence ).innerHTML='';
document.getElementById( dataFromFetch.likelihood + '-' + dataFromFetch.consequence ).title =  
  dataFromFetch.category + '
' + 
  dataFromFetch.Status + '
' + 
  dataFromFetch.Title + '
' +
  dataFromFetch.Priority

.box {
  position: relative;
  background-color: lightgrey;
  color: #fff;
  border-radius: 0px;
  padding: 20px;
  font-size: 150%;
  border: 1px solid black;
}

.wrapper {
  margin: 60px 0 90px 90px;
  display: grid;
  grid-gap: 0;
  grid-template-columns: repeat(5, 100px);
  grid-template-rows: repeat(5, 100px);
  grid-auto-flow: column;
}

#red {
  background-color: red;
}
#yellow {
  background-color: yellow;
}
#green {
  background-color: green;
}
section {
  position: relative;
  width: 600px;
}
p.likelihood {
   transform: rotate(-90deg) translateY(-50%);
   transform-origin: top;
   position: absolute;
   top: 50%;
   left: -20px;
   font-size: 30px;
   margin: 0;
}

p.consequence {
   font-size: 30px;
   position: absolute;
   transform: translateX(-50%);
   left: calc(50% + 45px);
   bottom: -60px;
   margin: 0;
}

.numbers-container {
  position: absolute;
  display: flex;
}

.numbers-container-x {
  padding-top: 10px;
  left: 90px;
  bottom: -25px; 
}

.numbers-container-x .number {
  width: 100px;
  text-align: center;
}

.numbers-container-y {
  flex-direction: column-reverse;
  left: 70px;
  top: 0;
}

.numbers-container-y .number {
  height: 100px;
  line-height: 100px;
}


    
        
        

        
        
        
    
    
    
        
            
            
            
            
            
            
            
            
            
            
            
        
             
            
        
            
            
        
            
            
        
            
            
        
            
            
        
            
            
        
            
            
        
            
            
        
            
            
        
            
            
        
            
            
        
            
            
        
            
            
        
            
            
        
            
            
        
            
            
        
            
            
        
        
            
            
        
            
            
        
            
        
        
        
            1
            2
            3
            4
            5
        
        
        
            1
            2
            3
            4
            5
        
        
        
            Likelihood
        
        
            Consequence

Font Awesome Icon Will Not Append Before Tool Tip

1 Answers