Aus Div-Container Inhalt per JavaScript auslesen?

Hallöchen,

Ich hab einen Link, wenn ich da drauf klicke möchte ich dass dem div ein String hinzugefügt wird. Der Link wird folgender Masen erzeugt:

<a href="javascript:aktion()">Link</a>

weiter oben steht dann das javascript:

function aktion() { document.getElementById('abl').innerHTML = document.getElementById('abl').innerHTML + "\n" + "hinzugefügt";}

der Div sieht so aus:

Plan

</div>

wenn ich jetzt auf den Link klicke, steht in dem Div: undefined hinzugefügt

Woran liegt das?

LG Checker0408

3 Antworten

Vom Fragesteller als hilfreich ausgezeichnet

Kieselsaeure

Nutzer, der sehr aktiv auf gutefrage ist

im Thema HTML

17.02.2017, 21:40

Ersetzte href durch onclick und du könntest in js statt = docu.... einfach += nehmen

Checker0408

Fragesteller

20.02.2017, 17:20

Danke ;) für die Antwort. ich hatte die Möglichkeit aus den Augen verloren xD. Das war das Einfachste. Ich hab einfach wie du gesagt hat ein += gemacht:

function aktion() {

document.getElementById('abl').innerHTML +=  "\n" + "song";
}

LG Checker0408

Kieselsaeure

20.02.2017, 22:59

gern :D was gibts schöneres als ein danke nach investierter mühe (obwohln die hier vergleichsweise ziemlich gering war) :p

abbrechen

Nutzer, der sehr aktiv auf gutefrage ist

im Thema HTML

17.02.2017, 19:12

Wenn ich es richtig sehe, möchtest du einfach nur Text in dein html-Element einfügen, oder?
Benutze dafür aber keinen Link.
Erstelle einen Button, egal ob mit dem button-Tag oder einem div und gib' ihm eine ID, z.B. id='button'
Dein div, wo später dein Content rein soll, bekommt auch eine ID, z.B. id='content'
Lade beide DOM-Elemente nun in dein JavaScript:

var button = document.getElementById('button');
var content = ... // hier das selbe

Dein Content muss ja irgendwo her kommen, ich nehme jetzt mal einfach eine Variable dafür:

var data = 'Toller Text';

Nun fügen wir den Text beim Klick ein:

button.addEventListener('click', function () {
    content.innerHTML = data;
    // alternativ ginge auch
    content.text = data;
});

Füge dein JavaScript am Ende des Body ein.

mastema666

Nutzer, der sehr aktiv auf gutefrage ist

im Thema HTML

17.02.2017, 16:05

Dein Code wurde hier leider teils von GF "verschluckt" wies aussieht, sowas besser extern posten, z.B. auf pastebin.com

Aber wenn ich dich richtig verstanden habe, könnte das (mit jQuery) z.B. so aussehen: https://jsfiddle.net/4wexg3y2/

Checker0408

Fragesteller

17.02.2017, 16:22

wenn ich den Text kopier und bei mir in ein Dokument einfüge, wird irgendwie nichts hinzugefügt

mastema666

17.02.2017, 16:27

@Checker0408

Du musst vorher auch jQuery einbinden, z.B. mit den vorgefertigten Codes von hier: https://developers.google.com/speed/libraries/#jquery

(einfach das "3.x Snippet" kopieren und im head-Bereich deiner Seite einfügen)

Und das JavaScript muss natürlich in <script> Tags, das geht bei jsfiddle ja automatisch.

Checker0408

Fragesteller

17.02.2017, 17:56

@mastema666

eine Frage: warum steht in dem code oft ein $ ? könnte man das auch anders schreiben, wenn ja, wie?

Ich hab leider kaum Erfahrung mit JS und auch wenig Ahnung

mastema666

17.02.2017, 19:42

@Checker0408

Das $ ist hier nur ein Kürzel / Alias für das jQuery Objekt, man könnte da auch z.B. jQuery('#bla').html() etc schreiben.

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

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

...zur Frage

javascript - innerHTML hinzufügen?

Hallo. folgender code:

var x = "hallo"; var y = "welt"; document.getElementById("demo").innerHTML = x; document.getElementById("demo").innerHTML = y;

wenn ein

die id demo hat, kommt da immer nur welt, weil hallo überschrieben wird.

kann man das einfach anhängen, ohne es zu überschreiben?? danke LG pixelino

...zur Frage

scroll animation mit javascript?

 window.onscroll = function() {scrollFunction()};
                
                function scrollFunction() {
                  if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
                    document.getElementById("pic").style.marginTop = "0px";
                    document.getElementById("pic").style.marginLeft = "900px";
                    document.getElementById("pic").style.width = "100px";
                    document.getElementById("pic").style.height = "100px";
                    document.getElementById("h1").style.width = "1003px";
                    document.getElementById("h1").style.height = "60px";
                    document.getElementById("h1").style.marginTop = "0px";
                    document.getElementById("h1").style.textAlign = "center";
                  } else {
                    document.getElementById("pic").style.marginTop = "110px";
                    document.getElementById("pic").style.marginLeft = "800px";
                    document.getElementById("pic").style.width = "200px";
                    document.getElementById("pic").style.height = "200px";
                    document.getElementById("h1").style.width = "250px";
                    document.getElementById("h1").style.height = "50px";
                    document.getElementById("h1").style.marginTop = "195px";
                  }

Hi, kann mir vielleicht jemand helfen die scroll animation so zu gestalten, dass sie nicht so abrupt geschieht ?

..oder gibt es eine bessere Lösung für mein Vorhaben, bzw wie könnte man es einfacher coden ?

Sry, bin totaler Anfänger =)

...zur Frage

Mit JavaScript innerhtml einen Wert in einem Tag mit += addieren, funktioniert nicht?

Ich habe folgenden HTML Code...

<span id="300smartphoneQualiHaustiervideo">8</span>

In dem span-Tag befindet sich die Zahl 8. Nun möchte ich, dass die Zahl subtrahiert wird. document.getElementById("300smartphoneQualiHaustiervideo").innerHTML -= 4; Das Ergebnis ist nun 4, also hat es funktioniert. Später wird der span-Tag wieder addiert. document.getElementById("300smartphoneQualiHaustiervideo").innerHTML += 4; Was nun rauskommt ist aber nicht 8 sondern 44. Warum kann man subtrahieren aber nicht addieren. Wie kann ich das Problem lösen?

...zur Frage

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;
  }

...zur Frage

Wie kann man mit einer schleife <div> erstellen und die id wird auch höher Danke :)?

Dass heißt dass die schleife aufhöhrt bei 10 und dass dann 10 div s gibt der erste div hat dann

         <div id ="1"></div>
        <div id ="2"></div>
        <div id ="3"></div>
        <div id ="4"></div>
        <div id ="5"></div>

So dass man nach her z.B. document.getElementById("1").innerHTML="hallo" ; document.getElementById("3").innerHTML="wie" ;

Danke :)

...zur Frage

JavaScript will nicht (Text in Element ändern per onclick)?

Hallo alle miteinander,

ich tüftle derzeit daran, den Text eines Elements zu ändern, sobald im unteren Menü ein Feld angeklickt wurde. Das Ganze funktioniert jedoch nicht und ich verstehe nicht wirklich warum. Könnt ihr mir helfen den Fehler zu finden?

Die wli-Variablen sollen den neuen Text enthalten, da ich das für jemanden programmiere, der keine Ahnung von JavaScript hat und ich es somit vereinfachen wollte, das er den Text ohne etwas kaputt zu machen, bearbeiten kann.

Hier einmal der Code, an dem ich herumprobiert habe. Allerdings ohne den CSS-Teil:

<script type="text/javascript">
  wli1 = "wli1";
  wli2 = "wli2";
  wli3 = "wli3";
  wli4 = "wli4";
  wli5 = "wli5";
  wli6 = "wli6";

  function fwli1() {
    document.getElementById("werdegangcon").value = wli1;
  }

  function fwli2() {
    document.getElementById("werdegangcon").value = wli2;
  }

  function fwli3() {
    document.getElementById("werdegangcon").value = wli3;
  }

  function fwli4() {
    document.getElementById("werdegangcon").value = wli4;
  }

  function fwli5() {
    document.getElementById("werdegangcon").value = wli5;
  }

  function fwli6() {
    document.getElementById("werdegangcon").value = wli6;
  }
</script>
<div class="conh15">
  <div class="con100">
    <div class="con_top center nummer">
      <h3>Werdegang</h3>
    </div>
    <div class="con_mid center" id="werdegangcon">
      2394    Abschluss des Abiturs mit Auszeichnung</br>
      2394    Job als Haustechnikerin
    </div>
    <div class="con_bot center">
      <ul class="werdegang">
        <li id="weli1" onclick="fwli1()">vor der Akademie</li>
        <li id="weli2" onclick="fwli2()">2395</li>
        <li id="weli3"onclick="fwli3()">2399</li>
        <li id="weli4"onclick="fwli4()">2401</li>
        <li id="weli5"onclick="fwli5()">2402</li>
        <li id="weli6" onclick="fwli6()">2403</li>
      </ul>
    </div>
  </div>
</div>

...zur Frage

Javascript geht nicht in einem von XMLHttpRequest geladenen Div?

Hallo ich versuche gerade mit XMLHttpRequest einen Div auf meiner Webseite zu aktuallisieren soweit geht das auch nur wenn ich versuche in der datei die geladen werden soll etwas mit Javascript auszuführen wird dies nicht getan. Ich habe aber überprüft das die datei geladen wird. Das was ich in JS geschrieben habe wird auch in den Div geladen nur nicht ausgeführt..
Hier meine Datei die den Div läd:

  <script language="javascript" type="text/javascript">
    function getData() {
      var xhr = new XMLHttpRequest();                 // Create XMLHttpRequest object
    
      xhr.onload = function() {                       // When response has loaded
        // The following conditional check will not work locally - only on a server
        if(xhr.status === 200) {                       // If server status was ok
          document.getElementById('load').innerHTML = xhr.responseText; // Update
        }
      };
      
      xhr.open('GET', 'sql/load.php', true);        // Prepare the request
      xhr.send();                                 // Send the request
    }
    
    setInterval(getData, 1000);
</script>

<div id='load'></div>

Hier meine Load.php

<?php
session_start();
require_once "config.php";
require_once "link_user.php";
        //Check new messages
        $test = "false";
        $sql = "SELECT * FROM msg WHERE touser='$user_name' AND readmsg='$test' LIMIT 1";
        $query = mysqli_query($db_link, $sql) or die (mysqli_error());
        $num = mysqli_num_rows($query);
        while ($row = mysqli_fetch_array($query)) {
            $chat_id = $row["chat_id"];

        }
        if($num == 1){
            
echo "<script>
var notification = new Notification('Notification title', {
    icon: 'http://cdn.sstatic.net/stackexchange/img/logos/so/so-icon.png',
    body: 'Hey there! You\'ve been notified!',
   });</script>
";
        }
?>

...zur Frage

Gibt es einen weg das wider zu entschlüsseln?

ich habe auf der Seite https://obfuscator.io meinen JavaScript code verschlüsselt.

kann ich vom verschlüsselten code wieder zurück zum javascript code, wenn ja wie?

mein Code:

function be() {
    let eingabe = document.getElementById('password').value;
    if (eingabe == 'das ist gut') {
        re();
    } else {
        alert('Falsches Passwort');
    }
}

function re() {
    let feld = document.getElementById('pas');
    feld.remove();
}

function lock() {
    document.getElementById('bod').innerHTML += `<div class="pass" id="pas">
    <div class="pass-1">
        <div class="pass-2 pass-3">
            <h2>Passwort eingeben um fortzufahren</h2>
        </div>
        <div class="pass-2">
            <input type="password" id="password" placeholder="Passwort eingeben">
        </div>
        <div class="pass-2">
            <button class="pass-4" onclick="be()">Betätigen</button>
        </div>
    </div>
</div>`
}

...zur Frage

HTML|JS|CSS - Hinter dem DIV den Hintergrund unschärfen?

Hallo,

ich möchte gerne die restliche Seite unscharf haben, wenn mein DIV-Formular offen ist. Wenn ich mein DIV aber schließe "Abbrechen", ist die ganze Seite weg. Ich vermute mal das es mit dem anzeigen und verstecken vom "overlay" DIV zusammenhängt, welcher auch die Unschärfe rein bringt.

HTML Part:

<html>
<header>
    <link rel="stylesheet" href="css/style.css">
    <script language="javascript" type="text/javascript" src="js/script.js"></script>
    <script type="text/javashttps://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.jsquery.min.js"></script>
</header>

<div class="bsr"> <b> Besprechungsraum: </b> RR </div> <br>

<div id="ajaxdiv"> </div>

<div align="center" id="reservierungdiv"> <a href="#" class="btn_reservierung" onclick="openForm()">Reservierung</a> </div>

<?php include "connect/users.php"; ?>

</div> </body> </html>

CSS Part:

body {
    background-color: whitesmoke;
    /overflow: hidden;/
    z-index: 0;
}

#overlay{
    /display: none;/
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: .5;
    z-index: 3;
    filter: blur(2px);
    visibility: hidden;
}

JS Part:

function openForm() {
    document.getElementById("myForm").style.display = "block";
    document.getElementById("overlay").style.display = "block"; <---
    startTimer();
}

function hideDiv() {
    document.getElementById('myForm2').reset();
    //$("#client")[0].reset();
    document.getElementById('myForm').style.display = 'none';
    document.getElementById("overlay").style.display = "none"; <---
}

...zur Frage

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>

...zur Frage

Div-Element mit javascript auslesen; wird eine Zahl als Zahl angesehen?

var x = document.getELementById("div-ID");

var y = document.getELementById("div-ID2");

var z = y.valueAsNumber * z.valueAsNumber;

Hallo zusammen,

ich habe das Problem, dass das Ergebnis aus zwei Div-Elementen, die einen Zahlwert enthalten, immer wieder bei dem Start der Funktion NaN ausspucken. Ich mache das nur aus Spaß und weiß gerde nicht weiter.

Können die Werte aus Div - Elementen nicht mit document.getElementByID ausgelesen werden, um dann mit den Variabeln weiterzurechnen?

Das ist oben nur skizziert, aber gebe ich bei var z als Variabel einen Zahlwert ein, dann klappt alles. Mein probelm scheint also da zu liegen.

...zur Frage

Könnt ihr mir bei folgendem JavaScript Problem helfen?

programmieren ist mein jüngstes und schwierigstes hobby, ich würd mich freuen wenn ich dieses Problem lösen könnte. Ich möchte, dass jeder Name, der im Eingabefeld eingegeben wird unten erscheint.

danke im voraus.

https://jsfiddle.net/6wcf9j5e/

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <form class="guestList" action="index.html" method="post">
      <label>Your Name: </label>
      <input type="text" name="" value="..." id="nameInput;" />
      <input type="submit" name="" value="submit" onclick="pushArray();"/>
    </form>
    <div id="addName"></div>
    <script type="text/javascript" src="dailyrepead.js">
    </script>
  </body>
</html>

JS:

var guestList = [];
var count = document.getElementById("nameInput");
function pushArray() {
  guestList.push(count);
  document.getElementById("addName").innerHTML += guestList[count] +"<br>";
}

...zur Frage

HTML JavaScript Variable untereinander?

Ich habe eine Variable namens data wo mehrere Sachen drinnen sind. Diese will ich jetzt untereinander ausgeben siehe Quellcode:

document.getElementById('Ausgabe').innerHTML = data;

Sie werden aber nur nebeneinander ausgegeben ein Split hat auch nicht geholfen irgendwelche ideen? Ja es ist ein String nur leider hilft ein Split nicht da dieser sonst nur überschreibt

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen