Ich habe versucht, eine HTML-Site zu erstellen, auf der ich einen Monat und einen Tag eingeben und eine bestimmte Nummer ausgeben kann (die Kartennummer bei meiner Arbeit).

Das Konzept lautet wie folgt:

Der Benutzer gibt Werte und Fehler ein. Die Sumbit-Schaltfläche aktiviert eine Javascript-Funktion, die die eingegebenen Informationen aufnimmt und durch eine Gleichung führt, um die gewünschte Zahl auszugeben. Die Ausgabe wird auf der Seite gedruckt.

Das Problem tritt auf, wenn Javascript versucht, die Eingaben zu verstehen. Ich habe überall gesucht, aber ich kann anscheinend keine Antwort auf das gesuchte Problem finden.

Ich lerne gerade HTML und Javascript. Ich bin mir bewusst, dass es möglich (und praktischer) ist, dies mit PHP zu tun, aber ich frage mich, ob dieses Setup überhaupt möglich ist.

Hier ist mein Quellcode: (Mit Kommentaren zum Problem)

<!DOCTYPE html>
<html>

<body>

  <script>
    //This is where the problems are occuring. How do I take the input (Id is "day" and "month" respectively) into numbers that Javascript can use?
    int day = document.getElementById("day");
    int month = document.getElementById("month");

    function myFunction() {
      if (day = < 16) {
        day == 1
      } else() {
        day == 0
      }

      // I want this equation to take the number of the month, and multiply it by two. If it is the earlier half of the month then I would like it to subtract one. Then have it edit the html with the id="demo"

      document.getElementById("demo").innerHTML = (month * 2) - day;
    }
  </script>

  <h2> What card number is it? </h2>
  Please enter the month and day. <br> <br>

  <!-- Is it possible to sumbit this entire form into Javascript or would I have to input one variable (or int) at a time? -->
  <form id="md">
    Month<br>
    <input type="number" id="month" value="4" min="1" max="12"> <br> <br> Day
    <br>
    <input type="number" id="day" value="18" min="1" max="31"><br><br>
    <input type="button" name="submit" value="submit" onclick="myFunction()">
  </form>
  <br><br>

  <p>Your number will appear here.</p>
  <p id="demo"> </p>
</body>

</html>
0
Chewynugget 19 Apr. 2018 im 04:48

3 Antworten

Beste Antwort

Sie sollten der Formularübermittlung einen Handler hinzufügen, damit Sie eine Funktion ausführen können, die die gewünschten Werte aus dem Formular abruft. Versuchen Sie nicht, Berechnungen in Ihrem script -Tag direkt unter dem Text durchzuführen - das Formular wurde noch nicht erstellt und noch nicht ausgefüllt.

Beispielsweise:

const demo = document.querySelector('#demo');
document.querySelector('form')
.addEventListener('submit', (e) => {
  // Use this line to prevent the form from submitting, which will destroy the current page:
  e.preventDefault();
  const month = document.querySelector('#month').value;
  const day = document.querySelector('#day').value;
  // console.log(day + ', ' + month);
  demo.textContent = day + ', ' + month;
});
<h2> What card number is it? </h2>
Please enter the month and day. <br> <br>
<form id="md">
  Month<br>
  <input type="number" id="month" value="4" min="1" max="12"> <br> <br> Day
  <br>
  <input type="number" id="day" value="18" min="1" max="31"><br><br>
  <input type="submit">
</form>

<p>Your number will appear here. <span id="demo"> </span></p>

Wenn Sie den HTML-Code ändern können, ändern Sie die letzte Eingabe in <input type="submit">. Wenn Sie darauf klicken, wird das Formular gesendet, und Sie können auf das Senden des Formulars warten, anstatt auf eine Schaltfläche zu klicken. Beachten Sie, dass Sie in diesem Fall sicherstellen müssen, dass preventDefault verwendet wird, da sonst die Seite ersetzt wird.

2
CertainPerformance 19 Apr. 2018 im 04:33

Dies kann auf verschiedene Weise erreicht werden. Sie können den Wert der Eingabefelder beim Senden des Formulars mithilfe von document.getElementById ("idofelement"). Value; abrufen

function myFunction() {
  var day = document.getElementById("day").value;
  var mon = document.getElementById("month").value;
  if (day <= 16) {
    day = 1;
  } else {
    day = 0;
  }
  var final = (mon * 2) - day;
  // I want this equation to take the number of the month, and multiply it by two. If it is the earlier half of the month then I would like it to subtract one. Then have it edit the html with the id="demo"
  document.getElementById("demo").innerHTML = final;
}
Please enter the month and day. <br> <br>

<form id="md">
  Month<br>
  <input type="number" id="month" value="4" min="1" max="12"> <br> <br> Day
  <br>
  <input type="number" id="day" value="18" min="1" max="31"><br><br>
  <input type="button" value="submit" name="submit" onclick="myFunction()">
</form>
<br><br>

<p>Your number will appear here.</p>
<p id="demo"> </p>
1
Bee 19 Apr. 2018 im 02:12

Sie hatten mehrere Syntaxprobleme ... Das Hauptproblem war jedoch, dass Sie nicht die tatsächlichen Werte von den Eingaben erhalten haben. Sie tun dies mit .value nach dem getElementById

<!DOCTYPE html>
<html>

<body>

  <script>
    //This is where the problems are occuring. How do I take the input (Id is "day" and "month" respectively) into numbers that Javascript can use?

    function myFunction() {
      var day = document.getElementById("day").value;
      var month = document.getElementById("month").value;

      if (day <= 16) {
        day == 1
      } else {
        day == 0
      }

      // I want this equation to take the number of the month, and multiply it by two. If it is the earlier half of the month then I would like it to subtract one. Then have it edit the html with the id="demo"

      document.getElementById("demo").innerHTML = (month * 2) - day;
    }
  </script>

  <h2> What card number is it? </h2>
  Please enter the month and day. <br> <br>

  <!-- Is it possible to sumbit this entire form into Javascript or would I have to input one variable (or int) at a time? -->
  <form id="md">
    Month<br>
    <input type="number" id="month" value="4" min="1" max="12"> <br> <br> Day
    <br>
    <input type="number" id="day" value="18" min="1" max="31"><br><br>
    <input type="button" name="submit" value="submit" onclick="myFunction()">
  </form>
  <br><br>

  <p>Your number will appear here.</p>
  <p id="demo"> </p>
</body>

</html>
2
Jonathan Queipo 19 Apr. 2018 im 02:01