Javascript - Note berechnen?

Schönen guten Abend,

ich versuche mir selber JS beizubringen und merke, dass es doch nicht ganz so einfach ist. Ich versuche ein Rechner zu programmieren, mit welche man die Zeugnisnote berechnen kann. Leider habe ich Probleme die Werte die ich ins Input-Feld eingebe in JS aufzurufen und zu verarbeiten. Würde mir jemand diesbezüglich helfen?

Bitte verzichtet darauf mir zu sagte wie einfach das sei und wie schlecht ich bin, ich will mich weiter motivieren mich weiterzubilden und mir nicht erzählen lassen wie einfach oder dass ich es doch lassen solle.

Mein JS

function berechnung(){
    var at = document.getElementById("allgemein")
    var kl = document.getElementById("klausur")
    document.getElementById("ergebnis").innerHTML = kl;
    allgemein+klausur
    console.log
}

Mein HTML

<div class="section">
            <p><h2>Notenrechner</h2></p>

            <input type="int" id="allgemein"> <br>
            <input type="int" id="klausur">
            <button onclick="berechnung()">Note berechnen</button>
            <p id=ergebnis></p>


        </div>

2 Antworten

Vom Beitragsersteller als hilfreich ausgezeichnet

shitposter

17.06.2022, 23:38

Ich verstehe zwar nicht, was du da berechnest, aber dieser code funktioniert wohl:

Dass du aufhören sollst, hätte ich dir nur gesagt, wenn du in Java programmiert hättest ;) JavaScript und Python übernehmen die Welt. Schön weiter fleißig üben.

<div class="section">
  <p><h2>Notenrechner</h2></p>
  <input type="int" id="allgemein"> <br>
  <input type="int" id="klausur">
  <button onclick="berechnung()">Note berechnen</button>
  <p id=ergebnis></p>
</div>

<script>

  function berechnung(){
      const at = parseInt(document.getElementById("allgemein").value)
      const kl = parseInt(document.getElementById("klausur").value)
      const ergebnis = String(kl + at);
      document.getElementById("ergebnis").innerHTML = ergebnis;
  }
  
</script>

PsySkill

Beitragsersteller

18.06.2022, 01:01

Vielen Dank, ich werde es morgen ausprobieren (für heut ist es zu spät) und dann ggf. Feedback oder weitere Fragen stellen.

GuteAntwort2021

17.06.2022, 23:46

Gute Antwort, aber ich vermute mal er/sie/es will den Durchschnitt:

const ergebnis = String((kl + at)/2);

shitposter

17.06.2022, 23:47

@GuteAntwort2021

Ja schon, aber warum dann "Allgemein" und "Klausur"?
"Klausur_1" und "Klausur_2" hätte ich ja verstanden^^

GuteAntwort2021

17.06.2022, 23:48

@shitposter

Vielleicht ist allgemein eben mündlich usw.

GruseINico

17.06.2022, 23:51

@GuteAntwort2021

Allgemein sollen vermutlich alle allgemeinen Noten sein und Klausur eben die Klausurnoten. Denn um die Endnote zu errechnen muss wird folgendes Gerechnet:

(Durchschnitt Klausur) + (Durchschnitt allg.) / 2 = Endnote

PsySkill

Beitragsersteller

18.06.2022, 00:59

@GuteAntwort2021

Also ich will die Endnote berechnen die aus 66% Allgemeiner Teil und 33% Klausur besteht

GuteAntwort2021

18.06.2022, 01:54

@PsySkill

Dann:

const ergebnis = String(Math.round((kl + at*2)/3));

GuteAntwort2021

18.06.2022, 01:55

@GruseINico

(Durchschnitt Klausur) + (Durchschnitt allg.) / 2 = Endnote

Genau das macht der Teil, den ich gepostet habe... ^^

PsySkill

Beitragsersteller

18.06.2022, 16:11

@GuteAntwort2021

Hat super funktioniert, vielen Dank

indexhtml

18.06.2022, 04:19

1. Keiner Benutzt noch Var. Benutze const oder let.

2.Gibt es kein <input type='int'>, Was du suchst ist type='number'.

3.Dein console.log() gibt nichtmal was aus...

4.Benutzt du nicht .value.

5.Sagen Deine Variablen Nichts aus.

6. Onclick ist nicht gut, kann man aber benutzen.

7.Es wäre auch nett wenn du wenigstens die Formel erklären würdest.Ich weiß nicht was At sein soll und wie viel Gewicht es hat.

Wenn 50% Mündlich zählt und 50% Schriftlich dann hier:

HTML : 

<input type='text' placeholder='Mündlich'> <br><br>
<input type='text' placeholder='Schriftlich'> <br><br>
<button>Berechnen</button>
<div id='output'></div>

JS:

const myButton = document.querySelectorAll('button')[0];
myButton.addEventListener('click', ()=>{
const Mündlich = document.querySelectorAll('input')[0].value;
const Schriftlich = document.querySelectorAll('input')[1].value;
const Output = document.querySelectorAll('div')[0];
Output.innerHTML = parseInt(Mündlich) + parseInt(Schriftlich);
});

Fang nochmal ganz von vorne an mit allem.

Such dir eine lange HTML/CSS/JS Reihe raus.

Babelfish

18.06.2022, 08:43

Keiner Benutzt noch Var. Benutze const oder let.

Nein! Man nutzt die Deklaration, die im jeweiligen Kontext die sinnvollste ist. Das sind zwar meist const und let aber es gibt auch Fälle, in denen man var braucht.

indexhtml

18.06.2022, 11:03

@Babelfish

Ja, aber ich glaube nur er lernt von irgendeinem alten buch oder Altem Youtube Video. Wo die nur var kennenlernen.

Babelfish

18.06.2022, 11:37

@indexhtml

Das mag ja sein aber ohne den Zusammenhang und den unterschiedlichen Gültigkeitsbereich zu kennen, nützt ihm eine pauschale Aussage nicht viel. Hier mal eine von vielen Erklärungen dazu:

https://memucho.de/var-let-const-Sichtbarkeit-von-Variablen-in-Javasc/609

Wichtig ist wirklich zu wissen, was der Unterschied bei der Sichtbarkeit ist, damit man die jeweils passende Deklaration nutzt.

PsySkill

Beitragsersteller

18.06.2022, 16:13

@Babelfish

Ich schau mir das mal an, vielen Dank

indexhtml

18.06.2022, 04:29

du kannst auch genauso getelementbyid benutzen statt document.querySelectorAll()...

Ich mag das nur mehr.

Ähnliche Beiträge

JS - Warum funktioniert der Button nicht Richtig?

Ich wollte ein simples Spiel mit JS programmieren und wollte einen Refresh des Bildschirms einfügen. An sich funktioniert das auch, jedoch reagiert der Button nicht immer. Je schneller der Refresh erfolgt, desto schlechter Funktioniert der Button. Kann mir da vielleicht jemand helfen?

<!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">
    <title>Document</title>
    <link href="miner.css" rel="stylesheet">
    <script src="miner.js"></script>
</head>
<body>
    <div class="monitor" id="monitor">
        <h1>Mine Tycoon</h1>
        <div>Mines: <font id="minesCounter">0</font></div><br>
        <div id="buyMineButton">
            <p class="button" onclick="buyMine()">Buy mine Cost: <font id="minesPrice">1</font></p>
        </div>
    </div>
</body>
</html>

body{
    background-color: #393939;
    color: #ffffff;
}


h1{
    text-align: center;
}


.button{
    height: auto;
    width: 180px;
    border-radius: 15px;
    outline: 2px solid red;
    outline-offset: 4px;
    text-align: center;
}
.buttonGreen{
    height: auto;
    width: 180px;
    border-radius: 15px;
    outline: 2px solid green;
    outline-offset: 4px;
    text-align: center;
}

var money = 100;


var mines = 0;
var minesPrice = 1;
var miners = 0;


var coal = 0;
var copper = 0;
var iron = 0;
var cobalt = 0;
var gold = 0;
var platinum = 0;
var diamond = 0;


var reload = 10;


function buyMine(){
    mines++;
    money -= minesPrice;
    minesPrice = minesPrice*2;
}


function loop(){
    
        setInterval(function(){
            refreshScreen();
        },1000/reload)
    
}


function refreshScreen(){
    minesCounter.innerHTML = mines;
    if(money < minesPrice){
        document.getElementById("buyMineButton").innerHTML = "<p class='button'>Buy mine Cost: <font id='minesPrice'></font></p>"
    }else{
        document.getElementById("buyMineButton").innerHTML = "<p class='buttonGreen' onclick='buyMine()'>Buy mine Cost: <font id='minesPrice'></font></p>"
    }
    document.getElementById("minesPrice").innerHTML = minesPrice;
}


loop();

...zum Beitrag

JavaScript interval mehrmals aufrufen?

Hallo, ich habe das Problem, dass ich ein Interval mehrmals aufrufen möchte.

Jedoch kann ich immer nur eines abbrechen.

Ich hätte das Abbrechen so versucht:

clearInterval(interval + thema);

Funktioniert leider nicht.

                var zahl = 0;
                var intervalphp = setInterval(erhoeheZahl, 100, 90, 'php');
                var intervalcss = setInterval(erhoeheZahl, 100, 100, 'css');


                function erhoeheZahl(max, kreis, thema) {
                    zahl++;
                    console.log(zahl);
                    document.getElementById(kreis).innerHTML = zahl;
                    document.getElementById(kreis + 'kreis').style.background = `conic-gradient(#712e1e ${zahl * 3.6}deg, #ffd5af 0deg)`;


                    if (zahl >= max) {
                        clearInterval(interval + thema);
                    }
                }

Danke im voraus!

...zum Beitrag

JavaScript, wofür steht in function(e) das e?

Hallo, ich lerne aktuell JS und habefolgendes Beispiel (siehe unten). Ich frage mich, wieso Lehrbücher in anonymen Funktionen solche Buchstaben als Parameter einbauen. Das e steht hier glaube ich für "Event", aber es ändert ja nichts an der Funktionsweise, wenn ich die Klammern leer stehen lasse, korrekt? Ich würde gerne verstehen, welche Vorteile sich für den Programmierer hier bieten. Am Anfang und auch jetzt fand ich es verwirrend, weil der Buchstabe ja nur symbolische Funktion zu haben scheint. Deswegen frage ich mich auch oft "Sollte ich das genauso handhaben oder eher weglassen". Dass es um ein Event geht, sieht man ja schon daran, dass Event-Listener und das Event change eingesetzt wird.



const checkbox = document.getElementById("remember");

checkbox.addEventListener(
    "change",                               
    function(e) {                           
        console.log(checkbox.value);        
        console.log(checkbox.checked);      
    }                 
);

...zum Beitrag

JavaScript - document.getElementById für Class?

var x = document.getElementById('x').innerHTML;

Wie funktioniert diese Funktion, wenn man eine Klasse ansprechen will?

...zum Beitrag

javascript api probleme?

Hallo,

guckt euch mal meinen Code an.

JAVASCRIPT:

// INPUT
const login = document.getElementById("loginInput");
const password = document.getElementById("passwordInput");
const button = document.getElementById("sendButton");


// FETCH
const url = "https://crudcrud.com/api/4b3acc467d8c47d8a608bb9820171935/todos"



const dataRender = (array) => {
  if (array === undefined) {
    console.log("Loading results...");
  } else {
    let dataList = array.map((item) => {
      return `
      <div class="users">
        <p>${item.login}</p>
        <button onclick="deleteRequest(${item.id})">Delete</button>
        </div>
        `;
    });
    const getHtml = document.getElementById("userTable");
    getHtml.innerHTML = dataList.join("");
  }
};


const fetchData = async () => {
  try {
    const response = await fetch(url);
    const data = await response.json();
    dataRender(data);
  } catch (error) {
    console.error(error);
  }
};



fetchData();


const postRequest = async () => {
  const data = {
    login: login.value,
    password: password.value,
    isLogin: false,
  };


  try {
    const response = await fetch(url, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(data),
    });


    const results = await response.json();
    console.log(results.message);
  } catch (error) {
    console.error(error);
  }


};


button.addEventListener("click", postRequest);


const deleteRequest = async (id) => {
  try {
    const response = await fetch(`${url}/${id}`, {
      method: "DELETE",
      headers: {
        "Content-Type": "application/json",
      }
    })
    const results = await response.json()
    console.log(results.message);
  }
  catch (error) {
    console.error(error);
  }
}

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CRUD</title>
  <script  defer src="./script.js"></script>
</head>
<body>
  <form>
    <input id="loginInput" type="text" placeholder="Login">    
    <input id="passwordInput" type="password" placeholder="Password">    
    <button onclick="" id="sendButton">Send</button>


    <div id="userTable">
      
    </div>
  </form>
</body>
</html>

Mein Ziel:

Wenn ihr auf das button "Send" drückt, dann erscheint ja der value von dem input "login" auf HTML (innerHTML heisst das glaube ich). Und zusammen mit dem value erscheint auch ein anderer Button namens "Delete". Mein Ziel ist es, dass wenn ich auf "Delete" drücke, dann sollte das item aus Backend-Server und aus HTML gelöscht werden. Aber das klappt bei mir die ganze Zeit nicht. Einfacher ist es wenn ihr meinen Code einfügt und selber mal den Code testet, dann werdet ihr verstehen, was ich machen will.

Bitte helft mir! Ich sitze schon wirklich lange dranrum und ohne Erfolg!

Dankeschön im Voraus!

MfG

MrOsmo

...zum Beitrag

Code funktioniert leider nicht?

Hallo!

Mein Code bekommt immer wieder eine Fehlermeldung, oder er funktioniert einfach nicht.

function showPasswordModal(route, userName) {
console.log('showPasswordModal() wurde aufgerufen mit Route:', route);
$('#passwordModal').modal('show');
$('#passwordForm').attr('action', route); // Setze die Aktion des Passwort-Formulars auf die gewählte Route
$('#passwordForm').data('userName', userName);
}
function validatePassword() {
console.log('validatePassword() wurde aufgerufen');
var enteredPassword = document.getElementById('passwordInput').value;
var userName = $('#passwordForm').data('userName');
var form = document.createElement('form');
form.method = 'POST';
form.action = "{{ route('admin.validatePassword', ['userName' => ':userName']) }}".replace(':userName', userName);
var csrfInput = document.createElement('input');
csrfInput.type = 'hidden';
csrfInput.name = '_token';
csrfInput.value = '{{ csrf_token() }}';
form.appendChild(csrfInput);
var passwordInput = document.createElement('input');
passwordInput.type = 'hidden';
passwordInput.name = 'password';
passwordInput.value = enteredPassword;
form.appendChild(passwordInput);
document.body.appendChild(form);
form.submit();

wenn auf den pay-button gedrückt wird, erscheint ein passwortfeld indem ein benutzerdefiniertes Passwort eingegeben werden soll. Diese Passwörter sind in einer Tabelle gespeichert. überprüft wird in diesen zwei methoden doch debuggen funktioniert irgendwie nicht und die variablen sind normalerweise richtig befüllt.? Weiß vllt irgendwer eine Lösung????? Danke im Vorraus.

...zum Beitrag

Wie kann ich einen Text in JavaScript positionieren?

Moin, ich möchte die einzelnen Wörter in JS bewegen, wie geht das?

JS-Code:

var footer = `

<h2> Service-Hotline </h2>

<h2> Quellen </h2>

<h2> Anfahrt </h2>

<p></p>

<h1><a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ"> Quellenverzeichnis </a></h1>

<h1><a href="https://www.google.de/maps/place/Heischberg+6,+24329+Dannau/@54.2467622,10.5792516,17z/data=!3m1!4b1!4m5!3m4!1s0x47b263e46411918d:0xc44a9eacc772c79d!8m2!3d54.24676!4d10.5807992"> Karte </a></h1>

document.getElementsByTagName("footer")[0].innerHTML = footer;

...zum Beitrag

Javascript: Funktion nur ausführen wenn bedingung stimmt?

ich habe dieses JS :

function Rechner(){
	var x=document.getElementById("laenge").value;
	var y=document.getElementById("breite").value;
	document.getElementById("flaeche").value = xy;
}

jedes input hat das Attribut :

oninput="Rechner(this.value)"

Doch er soll die flaeche im Input nur ausgeben wenn wirklich laenge und breite ausgefüllt sind. derzeit zeigt er erst noch 0 an wenn nur 1 stimmt.

wie geht das ? kann man da irgendwie noch sagen "if isset laenge & breite" ?

...zum Beitrag

JS Passwort überprüfen?

Hallo zusammen

Ich versuche ein Passwort zu validieren mithilfe von Regex.. Es soll nur erlaubt sein Buchstaben + Zahlen oder Zahlen + Sonderzeichen oder Sonderzeichen + Buchstaben... Nun geht es immer in die If schlaufe rein wenn ich NUR zahlen eingebe..Wieso? (Code-Style nicht beachten) Danke;D

 if(document.getElementById('Passwort').value.match(/[a-zA-ZäöüÄÖÜ]/) && document.getElementById('Passwort').value.match(/[0-9]/) || document.getElementById('Passwort').value.match(/[a-zA-ZäöüÄÖÜ]/) && document.getElementById('Passwort').value.match(/(?=.*[+-_,.:?!])/) ||  document.getElementById('Passwort').value.match(/[0-9]/) && document.getElementById('Passwort').value.match(/(?=.*[+-_,.:?!])/)){
    document.getElementById('Passwort').style.backgroundColor = "green";
    document.getElementById('passwortfalsch').innerHTML= "";
    document.getElementById('passwortfalsch').style.border= "";
    uberprufung = true;

}

...zum Beitrag

Ich habe angefangen Schere Stein Papier in JavaScript zu programmieren leider funktioniert die Ergebnis Auswertung am Ende nicht. Wo ist der Fehler?

Das ist der JS Code:

FuEingabe();
    function FuEingabe() {
    var eingabe = prompt("Bitte gib: Schere, Stein oder Papier ein!", "Schere, Stein, Papier");
}
    switch(FuEingabe()) {

        case "Schere":
        
        zufallenemyeingabe();
        break;

        case "Stein":
        
        zufallenemyeingabe();
        break;

        case "Papier":
        
        zufallenemyeingabe();
        break;

        default:

        alert("Ungültig!");

}
function zufallenemyeingabe() {
    var max = 3;
    var min = 1;
    var zufallzahl = (Math.random() * (max - min)) + min;
    console.log("Die Zufallzahl lautet: " + zufallzahl);
    var zufallzahlround = Math.round(zufallzahl);
    console.log("Die gerundete Zufallzahl heißt: " + zufallzahlround);
    var StEingabe = "non";

    switch(zufallzahlround){

        case 1:
        StEingabe = "Stein";
        break;

        case 2:
        StEingabe = "Papier";
        break;

        case 3:
        StEingabe = "Schere";
        break;

        default: 
        console.log("Error 01: Computer hat kein Ergebnis generiert!");
    }
    console.log(StEingabe);
    alert("Der Computer hat " + StEingabe) + " gewählt.";
    return StEingabe

}

function ergebnisauswertung() {
    var gewinner = "nil";
    var PlayEingabe = FuEingabe();

    if(PlayEingabe == "Schere" && zufallenemyeingabe == "Schere") { 

        gewinner = "Unentschieden!";

    }
                                                             
    if(PlayEingabe == "Schere" && zufallenemyeingabe == "Stein") {
        gewinner = "PC";

    }
                                                           
    if(PlayEingabe == "Schere" && zufallenemyeingabe == "Papier") {
        gewinner = "Player";

    }
                                                             
                                                              
     //Eigentliches Vergleichen der Wahl - Stein 
    if(PlayEingabe == "Stein" && zufallenemyeingabe == "Stein") {
        gewinner = "Unentschieden!";
        

    }
                                                           
    if(PlayEingabe == "Stein" && zufallenemyeingabe == "Schere") {
        gewinner = "Player";

    }
                                                            
    if(PlayEingabe == "Stein" && zufallenemyeingabe == "Papier") {
        gewinner = "PC";

    }
                                                            
                                                            
    //Eigentliches Vergleichen der Wahl - Papier 
    if(PlayEingabe == "Papier" && zufallenemyeingabe == "Papier") {
    gewinner = "Unentschieden!";

    }
                                                             
    if(PlayEingabe == "Papier" && zufallenemyeingabe == "Schere") { 

        gewinner = "PC";


    }
                                                             
    if(PlayEingabe == "Papier" && zufallenemyeingabe == "Stein") { 

        gewinner = "Player";

    }

    return gewinner;
                                                            
}
var gewinner = ergebnisauswertung();
console.log(gewinner);
if (ergebnisauswertung() == "Player") {
    alert("Du gewinnst!");
}

...zum Beitrag

Zwei funktionen auf ein button packen?

Wie kann ich zwei funktionen auf einen Button packen? Also ich will das bei jedem click auf meinen button

1. immer plus 1 addiert wird: onclick="pluszahl()"

2. das ein Sound abgespielt wird: onclick="play()"

Leider konnte ich nur den counter machen und frage mich jetzt wie ich den sound auch aktivieren kann

HTML:

    <span class="center">Bam?</span>
    <div onclick="custom()" class="btn-container">
        <button onclick="pluszahl()"; twoclick="play()"    class="button1">
            Bam
        </button>
    </div>

    <div id="resultArea">0</div>

JavaScript:

function play() {
  var audio = new Audio('bam.mp3');
  audio.play();
}

function pluszahl() {
  document.getElementById("resultArea").innerHTML = parseInt(document.getElementById("resultArea").innerHTML)+1;
  }

...zum Beitrag

Javascript for-of schleife ergebnise mit einander rechnen?

Hey,
folgendes: Ich möchte einen notendurchschnitt berechner bauen. Nun habe ich folgendes Problem: Ich trage die Noten in eine Tabelle ein. Mit einer for-of schleife tu ich drüber etarieren. Nur jetzt weiß ich nicht, wie ich die ganzen Zahlen zusammen rechnen soll.

Hier der Code:

let noten = e.target.parentNode.querySelectorAll(".noten");

for(let note of noten.values()){

if(note.value != 0){

console.log(note.value);

// Problem: Alle Noten miteinander verrechnen

}

...zum Beitrag

Javascript Rechnung mit Kommastellen?

Ich habe in JS eine Funktion, mit welcher ich meine Zeugnisnote berechnen kann, allerdings hätte ich es gerne so das z.B statt "3" eine "3,5" angegeben wird und nicht auf die nächste Zahl gerundet wird. Wie mache ich das?

function lkberechnung(){
    const at = parseInt(document.getElementById("lkallgemein").value)
    const kl1 = parseInt(document.getElementById("kl1").value)
    const kl2 = parseInt(document.getElementById("kl2").value)


    const lkergebnis = String(Math.round((kl1 +kl2 + at*2)/4));
    document.getElementById("lkergebnis").innerHTML =("Du hast " + lkergebnis + " Punkte auf dem Zeugnis");

...zum Beitrag

Javascript Quiz: Mehrere Antworten gelten lassen?

loIch hätte die Frage, mit welchem Satzzeichen oder sonst irgendwas man die Antwortanzahlen, also, dass mehrere Antwortmöglichkeiten, also mit groß- und Kleinschreibung und "Mio" und "Millionen", erhöhen kann.

Ich würde mich über eine schnelle Antwort freuen ^^

LG Arne

PS: Hier kommen noch ein ein paar Bilder

<div class="team-anzeige">
    <h1>Team <p id="team"></p> ist an der Reihe:</h1>
    <br>
    <br>
    <button onclick="btnLos()" id="los" class="los">Los !</button>
    <br>
    <h2 id="div2"></h2>
    <br>
    <br>
    <input id="input" type="text" placeholder="Hier Antwort eintragen">
    <br>
    <br>
    <button onclick="absendeBtn()" class="absenden" id="absenden">Absenden</button>
    </div>

    <script src="main.js"></script>
v

...zum Beitrag

Was möchtest Du wissen?

Deine Frage stellen