Question

我正在为我的公司开发一个风险评估模板，我有if语句不想贯穿我所有的子元素。我知道我需要创建一个将ID与行号连接起来的功能，以便创建一个新ID。然后基于该“ id”，我应该运行我的if语句。问题是我没有足够的经验来解决问题。

我也遇到困难，无法让相关的行号反映在该行的旁边。我对行号的解决方案仅将其附加到表的最顶端。

我已经尝试了一切，甚至用谷歌搜索了可能的解决方案，但是我没有成功。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title> Risk Assessment</title>
    <link rel="stylesheet" href="css/normalise.css">
    <link rel="stylesheet" href="css/Main.css">

</head>

<body id="Mybody">
    <img id="isrm" src="img/isrm.jpg" alt="Isrm Logo">

    <form onsubmit="return false"id="RiskManagement">
        <fieldset >
            <h1>Risk assessment</h1><br>
            <input class="project_details" type="date" placeholder="Date of risk assessment">
            <input class="project_details" type="text" placeholder="Client name">
            <input class="project_details" type="text" placeholder="CEO name">
            <input class="project_details" type="text" placeholder="Project name">
    </fieldset>

    <fieldset>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
            <table class="myTable" id="myTable"> 
                    <th id="nr">#</th>
                    <th>Activity conducted</th>
                    <th>Hazard associated with the activity</th>
                    <th>Risk associated with the hazard</th>
                    <th>Liklihood of risk manifesting</th>
                    <th>Consequence for when risk manifest</th>
                    <th>Risk rating</th>
                    <th>Risk severity level</th>
                    <th>Controls to implement</th>
                 <tr class="MyRow" id="rs">

                     <td><input class="rowNumber" type="number" id="riskNumber" readonly ></td>

                      <td><textarea class="Activity" type="text"></textarea></td> <!--activity input-->

                      <td><textarea class="hazard" type="text"></textarea></td> <!--Hazard input-->

                      <td><textarea class="risk" type="text"></textarea></td> <!--risk input-->

                      <td ><input class="potential" id="Liklihood" type="number" name="risk_liklihood" min="0" max="3"></td> <!--liklihood input-->

                      <td ><input class="Consequence"id="Consequence" type="number" name="risk_consequence" min="0" max="3" ></td> 
                      <!--consequence input-->

                      <td class="riskOnly" id="myRisk"><input  id="Risk_rating" name="Risk_rating" readonly></td> <!--risk rating display-->

                      <td class="severelevel"><input id="Severity_level" type="text" readonly></td> <!--severity level to auto display input-->

                      <td><textarea type="text"></textarea></td>

                      <td>
                        <button class="remove" onclick="removeCurrentRow(0)"><strong>-</strong></button>
                      </td> <!--Remove button-->
              </tr>
            </table>
    </fieldset>
<fieldset class="buttonSpace">
    <button id="addRow" onclick="rowCounting()">+ Add </button>
    <button type="button" id="pdf" onclick="submit()">Submit</button>
</fieldset>
    </form>
    <script src="js/rating.js"></script>
    <script src="js/element_behaviour.js"></script>
</body>
</html>



/*Code to get value from  liklihood input box*/
function getLiklihoodValue(x){
    var x=document.getElementById("Liklihood").value;
    return(x) 
}
getLiklihoodValue();

/*Code to get value from consequence input box*/
function getConsequenceValue(y){
    var y=document.getElementById("Consequence").value;
    return(y)
}
getConsequenceValue();





//code to produce risk rate to the DOM based on liklihood value//
function ProduceRiskRate(){
    var x=getLiklihoodValue();
    var y=getConsequenceValue();

    if(x==1&&y==1){
    return(1);
    } else if (x==2&&y==1){
        return(2);
    }else if(x==3&&y==1){
        return(4);
    }else if(x==1&&y==2){
        return(3);
    }else if(x==2&&y==2){
        return(5);
    }else if(x==3&&y==2){
        return(7);
    }else if(x==1&&y==3){
        return(6);
    }else if(x==2&&y==3){
        return(8);
    }else if(x==3&&y==3){
        return(9);
    }
} 
ProduceRiskRate();


//code to use the risk rate returned by the "Produce risk rate function" and assign it to the risk rating input box.//
function RateRiskRate(z){
           var z = ProduceRiskRate();

    if (z== 1) {
        document.getElementById('Risk_rating').value = ProduceRiskRate();
        } else if (z == 2) {
            document.getElementById('Risk_rating').value = ProduceRiskRate();
        } else if (z == 3) {
            document.getElementById('Risk_rating').value = ProduceRiskRate();
        } else if (z == 4) {
            document.getElementById('Risk_rating').value = ProduceRiskRate();
        } else if (z == 5) {
            document.getElementById('Risk_rating').value = ProduceRiskRate();
        } else if (z == 6) {
            document.getElementById('Risk_rating').value = ProduceRiskRate();
        } else if (z == 7) {
            document.getElementById('Risk_rating').value = ProduceRiskRate();
        } else if (z == 8) {
            document.getElementById('Risk_rating').value = ProduceRiskRate();
        } else if (z == 9) {
            document.getElementById('Risk_rating').value = ProduceRiskRate();
        }else {
            document.getElementById('Risk_rating').value = 'Not rated';
        }
  }

  document.getElementById("Liklihood").onchange = RateRiskRate;
  document.getElementById("Consequence").onchange = RateRiskRate;
  document.getElementById("Risk_rating").onfocus = RateRiskRate;
  RateRiskRate();





//code to return value in the risk rate section//
function getRiskRate(z) {
    var z = document.getElementById("Risk_rating").value;
    return (z);

  }

//code to rate risk based on condition and display rating in input box//
  function Rate() {
    var z = getRiskRate();

    if (z > 0 && z <= 2) {
        document.getElementById('Severity_level').value = 'Low';
        } else if (z > 2 && z <= 6) {
            document.getElementById('Severity_level').value = 'Medium';
            } else if (z > 6 && z <= 9) {
                document.getElementById('Severity_level').value = 'High';
                } else {
                    document.getElementById('Severity_level').value = 'value not defined';
                    }
  }



  document.getElementById("RiskManagement").onchange = Rate;
  /*
  document.getElementById("Risk_rating").onfocus = Rate;
  document.getElementById("Liklihood").onfocus = Rate;
  document.getElementById("Consequence").onfocus = Rate;
  document.getElementById("Risk_rating").onchange = Rate;
*/
Rate();

我期望的输出是我的if语句遍历新添加的行的所有相关部分以及行号以反映在每行的旁边。

Answer 1

我还没有发表评论的特权，并且我需要花一些时间研究您的问题才能为您提供实际的答案，但是我想让您知道一些可能在此期间有所帮助的切线事情。

您的某些函数（例如getRiskRate）具有一个参数，并且还定义了一个与该参数同名的局部变量，这很可能意味着传入的任何参数将永远不会被使用。（在函数中引用该变量名将使用本地版本。）

RateRiskRate具有多个条件，它们都导致相同的动作（设置“ Risk_rating”的值）。这可以正常工作，但是您可以在条件if (a == b || c == d)之间使用双引号（||，表示“或”），使用if语句完成相同的操作。甚至更好的是，由于您每次都检查相同的变量z，因此您实际上可以只说if ([1,2,3,4,5,6,7,8,9].includes(z))。

。。。。。
好吧，真正的答案：根据您的评论，建议您按类别而不是ID选择可能性和结果元素。然后，传统的for循环可以提取您的值，例如：

let allConsequenceElements = document.querySelectorAll('.Consequence');
let allConsequenceValues = [];
for(i = 0; i < allConsequenceElements.length; i++){
  allConsequenceValues.push(parseInt(allConsequenceElements[i].value));
}
// Now we have an array containing all the values from the Consequence column
console.log(allConsequenceValues);

就在那里！

如何通过所有相关的子元素运行If语句？

1 个答案: