字体真棒图标不会在工具提示之前附加

Question

我用一些简单的 HTML 和非常简单的 JS 创建了一个风险矩阵。可以在工具提示中将项目发布到三个不同的类别：红色、黄色或绿色。这些都与发布的每个项目的严重性（可能性 * 后果）有关。

截至目前，该信息仅在其所属的 (x, y) 坐标上发布在工具提示中，麻烦的是必须将鼠标悬停在其附加的正方形上才能显示工具提示，这有点不方便.我想根据严重程度附加不同的字体真棒图标，如下所示：

<i class="fa fa-exclamation" aria-hidden="true"></i> 这用于附加在绿色方块中的项目。 <i class="fa fa-exclamation-circle" aria-hidden="true"></i> 这适用于黄色方块中附加的项目。 <i class="fa fa-exclamation-triangle" aria-hidden="true"></i> 这适用于红场中附加的项目。

在我的 sn-p 中，你可以看到我注释掉的地方，试图附加第一个来测试它，它告诉我 "<a class='gotoLine' href='#236:87'>236:87</a> Uncaught TypeError: document.getElementById(...).innerHTML is not a function"

更新 Yash 提供了一种有效的附加方法，可以回答部分问题。在新更新的 sn-p 中，我创建了一个条件来根据 ConsequencexLikelihood 的值附加三种不同类型的 Font Awesome Icons，现在什么都不会附加到表格中

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='<i class="fa fa-exclamation" aria-hidden="true" style="font-color: black;"></i>';
} if (dataFromFetch.consequence === 2 && dataFromFetch.likelihood <= 3){
document.getElementById( dataFromFetch.likelihood + '-' + dataFromFetch.consequence ).innerHTML='<i class="fa fa-exclamation" aria-hidden="true" style="font-color: black;"></i>';
} if (dataFromFetch.consequence === 3 && dataFromFetch.likelihood <= 2){
document.getElementById( dataFromFetch.likelihood + '-' + dataFromFetch.consequence ).innerHTML='<i class="fa fa-exclamation" aria-hidden="true" style="font-color: black;"></i>';
} if (dataFromFetch.consequence === 4 && dataFromFetch.likelihood === 1){
document.getElementById( dataFromFetch.likelihood + '-' + dataFromFetch.consequence ).innerHTML='<i class="fa fa-exclamation" aria-hidden="true" style="font-color: black;"></i>';
} if (dataFromFetch.consequence === 2 && dataFromFetch.likelihood >= 4){
document.getElementById( dataFromFetch.likelihood + '-' + dataFromFetch.consequence ).innerHTML='<i class="fa fa-exclamation-circle" aria-hidden="true" style="font-color: black;"></i>';
} if (dataFromFetch.consequence === 3 && dataFromFetch.likelihood > 2 && dataFromFetch < 5){
document.getElementById( dataFromFetch.likelihood + '-' + dataFromFetch.consequence ).innerHTML='<i class="fa fa-exclamation-circle" aria-hidden="true" style="font-color: black;"></i>';
} if (dataFromFetch.consequence === 4 && dataFromFetch.likelihood > 1 && dataFromFetch.likelihood < 4){
document.getElementById( dataFromFetch.likelihood + '-' + dataFromFetch.consequence ).innerHTML='<i class="fa fa-exclamation-circle" aria-hidden="true" style="font-color: black;"></i>';
} if (dataFromFetch.consequence === 5 && dataFromFetch.likelihood < 3){
document.getElementById( dataFromFetch.likelihood + '-' + dataFromFetch.consequence ).innerHTML='<i class="fa fa-exclamation-circle" aria-hidden="true" style="font-color: black;"></i>';
} if (dataFromFetch.consequence === 5 && dataFromFetch.likelihood >= 3){
document.getElementById( dataFromFetch.likelihood + '-' + dataFromFetch.consequence ).innerHTML='<i class="fa fa-exclamation-triangle" aria-hidden="true"></i>';
} if (dataFromFetch.consequence === 4 && dataFromFetch.likelihood >= 4){
document.getElementById( dataFromFetch.likelihood + '-' + dataFromFetch.consequence ).innerHTML='<i class="fa fa-exclamation-triangle" aria-hidden="true"></i>';
} if (dataFromFetch.consequence === 3 && dataFromFetch.likelihood === 5){
document.getElementById( dataFromFetch.likelihood + '-' + dataFromFetch.consequence ).innerHTML='<i class="fa fa-exclamation-triangle" aria-hidden="true"></i>';
} 

document.getElementById( dataFromFetch.likelihood + '-' + dataFromFetch.consequence ).innerHTML='<i class="fa fa-exclamation" aria-hidden="true" style = "color: black;"></i>';
document.getElementById( dataFromFetch.likelihood + '-' + dataFromFetch.consequence ).title =  
  dataFromFetch.category + '\n' + 
  dataFromFetch.Status + '\n' + 
  dataFromFetch.Title + '\n' +
  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;
}

<html lang="en">
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="Risk Management Matrix">

        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
        <!-- Insert any extra scripts here -->
    </head>
    <body>
    <section>
        <div class="wrapper">
            <div class="box box1" id="5-1" style="background-color: #329932;">
            </div>
            <div class="box box1" id="4-1" style="background-color: #329932;">
            </div>
            <div class="box box1" id="3-1" style="background-color: #329932;">
            </div>
            <div class="box box1" id="2-1" style="background-color: #329932;">
            </div>
            <div class="box box1" id="1-1" style="background-color: #329932;">
            </div>
            <div class="box box1" id="5-2" style="background-color: #ffff32;">
        
            </div> 
            <div class="box box1" id="4-2" style="background-color: #ffff32;">
        
            </div>
            <div class="box box1" id="3-2" style="background-color: #329932;">
        
            </div>
            <div class="box box1" id="2-2" style="background-color: #329932;">
        
            </div>
            <div class="box box1" id="1-2" style="background-color: #329932;">
        
            </div>
            <div class="box box1" id="5-3"  style="background-color: #ff3232;">
        
            </div>
            <div class="box box1" id="4-3" style="background-color: #ffff32;">
        
            </div>
            <div class="box box1" id="3-3" style="background-color: #ffff32;">
        
            </div>
            <div class="box box1" id="2-3" style="background-color: #329932;">
        
            </div>
            <div class="box box1" id="1-3" style="background-color: #329932;">
        
            </div>
            <div class="box box1" id="5-4" style="background-color: #ff3232;">
        
            </div>
            <div class="box box1" id="4-4" style="background-color: #ff3232;">
        
            </div>
            <div class="box box1" id="3-4" style="background-color: #ffff32;">
        
            </div>
            <div class="box box1" id="2-4" style="background-color: #ffff32;">
        
            </div>
            <div class="box box1" id="1-4" style="background-color: #329932;">
        
            </div>
            <div class="box box1" id="5-5" style="background-color: #ff3232;">
        
            </div>
            <div class="box box1" id="4-5" style="background-color: #ff3232;">
        
            </div>
            <div class="box box1" id="3-5" style="background-color: #ff3232;">
        
        
            </div>
            <div class="box box1" id="2-5" style="background-color: #ffff32;">
        
            </div>
            <div class="box box1" id="1-5" style="background-color: #ffff32;">
        
            </div>
        </div>
        
        <div class="numbers-container numbers-container-y">
            <div class="number">1</div>
            <div class="number">2</div>
            <div class="number">3</div>
            <div class="number">4</div>
            <div class="number">5</div>
        </div>
        
        <div class="numbers-container numbers-container-x">
            <div class="number">1</div>
            <div class="number">2</div>
            <div class="number">3</div>
            <div class="number">4</div>
            <div class="number">5</div>
        </div>
        
        <p class="likelihood">
            Likelihood
        </p>
        <p class="consequence">
            Consequence
        </p>
        </section>
    </body>
    </html>

Answer 1

您可以直接为 innerHTML 赋值，因为它不是函数。因此，您需要删除括号并为其分配一个值。

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='<i class="fa fa-exclamation" aria-hidden="true"></i>';
document.getElementById( dataFromFetch.likelihood + '-' + dataFromFetch.consequence ).title =  
  dataFromFetch.category + '\n' + 
  dataFromFetch.Status + '\n' + 
  dataFromFetch.Title + '\n' +
  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;
}

<html lang="en">
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="Risk Management Matrix">

        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
        <!-- Insert any extra scripts here -->
    </head>
    <body>
    <section>
        <div class="wrapper">
            <div class="box box1" id="5-1" style="background-color: #329932;">
            </div>
            <div class="box box1" id="4-1" style="background-color: #329932;">
            </div>
            <div class="box box1" id="3-1" style="background-color: #329932;">
            </div>
            <div class="box box1" id="2-1" style="background-color: #329932;">
            </div>
            <div class="box box1" id="1-1" style="background-color: #329932;">
            </div>
            <div class="box box1" id="5-2" style="background-color: #ffff32;">
        
            </div> 
            <div class="box box1" id="4-2" style="background-color: #ffff32;">
        
            </div>
            <div class="box box1" id="3-2" style="background-color: #329932;">
        
            </div>
            <div class="box box1" id="2-2" style="background-color: #329932;">
        
            </div>
            <div class="box box1" id="1-2" style="background-color: #329932;">
        
            </div>
            <div class="box box1" id="5-3"  style="background-color: #ff3232;">
        
            </div>
            <div class="box box1" id="4-3" style="background-color: #ffff32;">
        
            </div>
            <div class="box box1" id="3-3" style="background-color: #ffff32;">
        
            </div>
            <div class="box box1" id="2-3" style="background-color: #329932;">
        
            </div>
            <div class="box box1" id="1-3" style="background-color: #329932;">
        
            </div>
            <div class="box box1" id="5-4" style="background-color: #ff3232;">
        
            </div>
            <div class="box box1" id="4-4" style="background-color: #ff3232;">
        
            </div>
            <div class="box box1" id="3-4" style="background-color: #ffff32;">
        
            </div>
            <div class="box box1" id="2-4" style="background-color: #ffff32;">
        
            </div>
            <div class="box box1" id="1-4" style="background-color: #329932;">
        
            </div>
            <div class="box box1" id="5-5" style="background-color: #ff3232;">
        
            </div>
            <div class="box box1" id="4-5" style="background-color: #ff3232;">
        
            </div>
            <div class="box box1" id="3-5" style="background-color: #ff3232;">
        
        
            </div>
            <div class="box box1" id="2-5" style="background-color: #ffff32;">
        
            </div>
            <div class="box box1" id="1-5" style="background-color: #ffff32;">
        
            </div>
        </div>
        
        <div class="numbers-container numbers-container-y">
            <div class="number">1</div>
            <div class="number">2</div>
            <div class="number">3</div>
            <div class="number">4</div>
            <div class="number">5</div>
        </div>
        
        <div class="numbers-container numbers-container-x">
            <div class="number">1</div>
            <div class="number">2</div>
            <div class="number">3</div>
            <div class="number">4</div>
            <div class="number">5</div>
        </div>
        
        <p class="likelihood">
            Likelihood
        </p>
        <p class="consequence">
            Consequence
        </p>
        </section>
    </body>
    </html>