如何使用 GetElementById 获取元素的值而不是对象？

Question

如果我正在使用

    console.log(document.getElementById("P1").value);
    console.log(document.getElementById("P2").value);
    console.log(document.getElementById("H1").value);

获取三个输入（文本）的值。当我使用那些 console.log 时，它们会给我很好的答案，元素。但是当我想通过 id 将 3 个 get 元素分配给 3 个变量时，它会这样说：object HTMLInputElement。为什么是这样？这是我的 html :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Resterende kracht berekenen</title>
    <link rel="stylesheet" href="./Krachten.css">
</head>
<body>
    <h2 id="Titel">Vul hier je berekening in:</h2>
        Lengte pijl 1 in cm :<br>
        <input type="text" id="P1" placeholder="Pijl 1" class="P1"><br>
        Lengte pijl 2 in cm :<br>
        <input type="text" id="P2" placeholder="Pijl 2" class="P2"><br>
        Hoek gemeten in graden :<br>
        <input type="text" id="H1" placeholder="Hoek" class="H1">
        <br><br><br><button id="btn" type="button" onclick="KB()">Klik om antwoord te berekenen</button>
    <script src="./Krachten.js"></script>
    <script src="./Dingen voor Main (Niet aankomen)/jquery-3.3.1.min.js"></script>
</body>
</html>

Javascript :

function KB () {
  var F1 = 4;
  var F2 = 3;
  var S = 20;
  var H = 60; //in graden, moet naar radians
  var F15 = F1 * S;
  var F25 = F2 * S;
  var F11;
  var F21;
  var H2 = (Math.PI);
  var H3 = (H / 180);
  var H4 = (H3 * H2);
  var H5 = Math.cos(H4);
    var Temp1;
  var Temp2;
  var Fr2;
  berekenen();
  function berekenen () {
    F11 = F15 * F15;
    F21 = F25 * F25;
    Temp1 = (2*(F15*F25))
    Temp2 = (H5 * Temp1) + (F11 + F21)
    Fr2 = (Math.round((Math.sqrt(Temp2))));
    console.log(`De kracht die resterend is van deze 2 krachten = ${Fr2} Newton`)
    alert(`De kracht die resterend is van deze 2 krachten = ${Fr2} Newton`)
    console.log(document.getElementById("P1").value);
    console.log(document.getElementById("P2").value);
    console.log(document.getElementById("H1").value);
    }
};

Answer 1

这些值都是空的。为每个输入设置值，你就可以开始了。或者，您可以在输入框中输入值

function KB () {
  var F1 = 4;
  var F2 = 3;
  var S = 20;
  var H = 60; //in graden, moet naar radians
  var F15 = F1 * S;
  var F25 = F2 * S;
  var F11;
  var F21;
  var H2 = (Math.PI);
  var H3 = (H / 180);
  var H4 = (H3 * H2);
  var H5 = Math.cos(H4);
    var Temp1;
  var Temp2;
  var Fr2;
  berekenen();
  function berekenen () {
    F11 = F15 * F15;
    F21 = F25 * F25;
    Temp1 = (2*(F15*F25))
    Temp2 = (H5 * Temp1) + (F11 + F21)
    Fr2 = (Math.round((Math.sqrt(Temp2))));
    console.log(`De kracht die resterend is van deze 2 krachten = ${Fr2} Newton`)
    alert(`De kracht die resterend is van deze 2 krachten = ${Fr2} Newton`)
    console.log(document.getElementById("P1").value);
    console.log(document.getElementById("P2").value);
    console.log(document.getElementById("H1").value);
    
    console.log(document.getElementById("P1").placeholder);
    console.log(document.getElementById("P2").placeholder);
    console.log(document.getElementById("H1").placeholder);
    }
};

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Resterende kracht berekenen</title>
    <link rel="stylesheet" href="./Krachten.css">
</head>
<body>
    <h2 id="Titel">Vul hier je berekening in:</h2>
        Lengte pijl 1 in cm :<br>
        <input type="text" id="P1" placeholder="Pijl 1" value='abc' class="P1"><br>
        Lengte pijl 2 in cm :<br>
        <input type="text" id="P2" placeholder="Pijl 2" value='def' class="P2"><br>
        Hoek gemeten in graden :<br>
        <input type="text" id="H1" placeholder="Hoek" value='ghi' class="H1">
        <br><br><br><button id="btn" type="button" onclick="KB()">Klik om antwoord te berekenen</button>
    <script src="./Krachten.js"></script>
    <script src="./Dingen voor Main (Niet aankomen)/jquery-3.3.1.min.js"></script>
</body>
</html>

如何使用 GetElementById 获取元素的值而不是对象？

How to use GetElementById to get not a object but the value of element?

html

javascript

getelementbyid