找不到计算和输出的方法

Question

我正在尝试从“timeSpend”和“breakTime”中获取百分比并将其存储在 fSubject、sSubject、tSubject 中并将其存储在数据集中：date[]，这样它就可以输出它，但它只给出“timeSpend”和“breakTime”的值，而不是 fSubject、sSubject、tSubject。颜色也不起作用我不知道为什么enter image description here

    let timeSpend = document.querySelector("#time_spend");
let breakTime = document.querySelector("#break_time");
let fSubject = document.querySelector("#first_subjects");
let sSubject = document.querySelector("#second_subjects");
let tSubject = document.querySelector("#third_subjects");
let mostCon = document.querySelector("#first_percentage");
let secCon = document.querySelector("#second_percentage");
let thirdCon = document.queryCommandValue("#third_percentage");

let fSubjectV = (mostCon/100) * (timeSpend + breakTime); 
let sSubjectV = (secCon/100)* (timeSpend + breakTime);
let tSubjectV = (thirdCon/100)* (timeSpend + breakTime);

let myChart = document.getElementById("myChart").getContext("2d");

document.querySelector("button").addEventListener("click", () => {
    let pieChart = new Chart(myChart, {
        type: "pie",
        data: {
            labels: [
                "Time spend",
                "Break Time",
                fSubject.value,
                sSubject.value,
                tSubject.value,
            ],
            datasets: [
                {
                    label: "Plan",
                    data: [
                        timeSpend.value,
                        breakTime.value,
                        mostCon.value,
                        secCon.value,
                        thirdCon.value,
                    ],
                },
            ],
        },
        options: {},
    });
});

HTML 我在其中进行输入并从

获取输入

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js"></script>
    
    <link rel="stylesheet" href="CSS/main-style.css" />

    <title>Student Planner</title>
  </head>
  <body>
    <header>
      <div class="title">
        <h1>THE STUDENT PLANNER</h1>
      </div>
      <div class="sub_header">
        <h3>A SIMPLE PLANNER TO ORGANISE YOUR TIME</h3>
        <h3>LET'S PLAN YOUR SESSION</h3>
      </div>
    </header>

    <main>
        <input type="number" id="time_spend" class="text-box" placeholder="How much time do you have?" />
        <input type="number" id="break_time" class="text-box"  placeholder="how many breaks do you want to have?" /><br>
        <input type="text" id="first_subjects" class="subjects-box"  placeholder="Most confident subject?" /><input type="number" id="first_percentage" class="percantage_subject" placeholder="Understand percentage ">
        <input type="text" id="second_subjects"  class="subjects-box"  placeholder="Second confident subject?" /><input type="number" id="second_percentage" class="percantage_subject" placeholder="Understand percentage ">
        <input type="text" id="third_subjects" class="subjects-box"  placeholder="Third subject?" /> <input type="number" id="third_percentage" class="percantage_subject" placeholder="Understand percentage ">
        <br>
        
        <button type="button" class="button">Finished</button>
        
        <div class="container">
            <canvas id="myChart"></canvas>
        </div>
        
        <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js"></script>
      <script src="JS/main.js"></script>
      
    </main>

    <footer>
      <p>&copy; DK_CODE</p>
      <p>12/3/2022</p>
    </footer>
  </body>
</html>

Answer 1

您需要将所有变量初始化到按钮点击的函数中，而不是在该函数之外。

您的情况是，所有变量仅在 main.js 加载时加载一次，此时您的输入字段的值将为空白。因此，您的所有变量都将加载空白值，这就是图表为空白的原因。

检查以下代码：

document.querySelector("button").addEventListener("click", () => {
  let timeSpend = document.querySelector("#time_spend").value;
  let breakTime = document.querySelector("#break_time").value;
  let fSubject = document.querySelector("#first_subjects").value;
  let sSubject = document.querySelector("#second_subjects").value;
  let tSubject = document.querySelector("#third_subjects").value;
  let mostCon = document.querySelector("#first_percentage").value;
  let secCon = document.querySelector("#second_percentage").value;
  let thirdCon = document.querySelector("#third_percentage").value;

  let fSubjectV = (mostCon / 100) * (timeSpend + breakTime);
  let sSubjectV = (secCon / 100) * (timeSpend + breakTime);
  let tSubjectV = (thirdCon / 100) * (timeSpend + breakTime);

  const canvasEle = document.createElement("canvas");
  canvasEle.id = "myChart";
  let myChart = canvasEle.getContext("2d");
  const firstEle = document.getElementsByClassName("container")[0].children[0];
  if (firstEle) {
    document
      .getElementsByClassName("container")[0]
      .replaceChild(canvasEle, firstEle);
  } else {
    document.getElementsByClassName("container")[0].appendChilde(canvasEle);
  }

  let pieChart = new Chart(myChart, {
    type: "pie",
    data: {
      labels: ["Time spend", "Break Time", fSubject, sSubject, tSubject],
      datasets: [
        {
          label: "Plan",
          data: [timeSpend, breakTime, mostCon, secCon, thirdCon],
          backgroundColor: ["black", "red", "orange", "green", "blue"]
        }
      ]
    },
    options: {}
  });
});

.container{
  height:500px;
  width:500px;
}

<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js"></script>

  <link rel="stylesheet" href="CSS/main-style.css" />

  <title>Student Planner</title>
</head>

<body>
  <header>
    <div class="title">
      <h1>THE STUDENT PLANNER</h1>
    </div>
    <div class="sub_header">
      <h3>A SIMPLE PLANNER TO ORGANISE YOUR TIME</h3>
      <h3>LET'S PLAN YOUR SESSION</h3>
    </div>
  </header>

  <main>
    <input type="number" id="time_spend" class="text-box" placeholder="How much time do you have?" />
    <input type="number" id="break_time" class="text-box" placeholder="how many breaks do you want to have?" />
    <br>
    
    <input type="text" id="first_subjects" class="subjects-box" placeholder="Most confident subject?" />
    <input type="number" id="first_percentage" class="percantage_subject" placeholder="Understand percentage ">
    
    
    <input type="text" id="second_subjects" class="subjects-box" placeholder="Second confident subject?" />
    <input type="number" id="second_percentage" class="percantage_subject" placeholder="Understand percentage ">
    
    
    <input type="text" id="third_subjects" class="subjects-box" placeholder="Third subject?" /> 
    <input type="number" id="third_percentage" class="percantage_subject" placeholder="Understand percentage ">
    <br>

    <button type="button" class="button">Finished</button>

    <div class="container">
      <canvas id="myChart"></canvas>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js"></script>
    <script src="JS/main.js"></script>

  </main>

  <footer>
    <p>&copy; DK_CODE</p>
    <p>12/3/2022</p>
  </footer>
</body>

</html>

找不到计算和输出的方法

Can't find the way to calculate and output it

html

javascript

chart.js