文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >字体图标不会附加在工具提示之前

问字体图标不会附加在工具提示之前
EN

Stack Overflow用户
提问于 2021-05-11 14:20:37
回答 1查看 94关注 0票数 1

我用一些简单的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>。

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

UPDATE Yash提供了一个工作的附加方法来回答部分问题。在新更新的代码段中，我创建了一个条件来根据ConsequencexLikelihood的值追加三种不同类型的字体Awesome，现在没有任何东西会附加到表中

​

代码语言：javascript
复制
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
代码语言：javascript
复制
.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;
}
代码语言：javascript
复制
<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>

​

javascript
html
css
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-05-11 14:30:07

您可以直接为innerHTML赋值，因为它不是一个函数。因此，您需要删除括号，只需将值赋值即可。

​

代码语言：javascript
复制
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
代码语言：javascript
复制
.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;
}
代码语言：javascript
复制
<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>

​

票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/67488650

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档