JavaScript: textarea beim Seiten laden kurz aufleuchten lassen?

ich habe eine textare mit ID, diese soll beim laden der Website so kurz mit einem sauberen Übergang gelb werden und dann wieder zum Ursprung gehen. habe ein bisschen probiert aber es klappt nicht : https://jsfiddle.net/q01k5d97/1/

kann wer helfen ?

6 Antworten

Vom Fragesteller als hilfreich ausgezeichnet

threadi

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Computer, HTML, Webseite

19.11.2019, 11:02

In deinem Beispiel ist kein textarea-Element zu sehen. Statt dessen ein <div>-Element, welches Du per JavaScript beeinflusst.

Auf JavaScript kannst Du hier jedoch komplett verzichten. Geht auch mit purem CSS. Schau dich mal nach "css animation" um. Hier eine Hilfsseite:
https://www.mediaevent.de/css/animation.html

Woher ich das weiß:Berufserfahrung

Suiram27

21.11.2019, 17:01

Siehe hier: https://codepen.io/nJJz1kNPXUpiSvJS/pen/VwwRRjj

Ohne JS nur mit CSS.

Woher ich das weiß:Berufserfahrung

XentriX5526

19.11.2019, 10:59

Geht auch ohne JS ... #CSS

Woher ich das weiß:eigene Erfahrung

xxxReaver

19.11.2019, 11:14

Per JavaScript könnte das so aussehen:

<div id="Foo">Blink</div>

function myFunction() {

var f = document.getElementById('Foo');

f.style.display = "inline-block";

var counter = 1;

var temp = false;

var myVar = setInterval(function() {

f.style.background = "rgba(255, 255, 0, "+counter/10+")";

if(counter>=10){

temp = true;

}

if(temp){

counter--

}else{

counter++

}

if(counter<=0){

clearInterval(myVar);

}

console.log(counter);

}, 100);

}

</script>

LeBonyt

19.11.2019, 11:10

Lies dir mal dieses Beispiel durch

https://stackoverflow.com/questions/16791851/a-flash-of-color-using-pure-css-transitions

think this is what you are looking for. The sample is not exact.

ist das Codebeispiel, auf Run klicken.

Woher ich das weiß:Berufserfahrung – Web Developer bei einem mittelständischen Portalbetreiber

Hallo!

Ich würde gerne für meine Website ein Bild einbauen, welches nach unten immer transparenter wird. Wenn es geht würde ich gerne nur css, HTML oder JavaScript nutzen. (Wie) Ist das möglich?

Ich möchte es gerne so ähnlich wie in YouTube Music machen, wenn man seinen eigenen Account ansieht. Hier ist auch nochmal ein Screenshot:

...zur Frage

Source Code von Website auslesen mit JavaScript?

Hallo,

ich bin gerade am verzweifeln. Ich wollte eigentlich nur noch kurz eine kleine Sache an meiner Website programmieren, aber jetzt hänge ich schon seit einer Stunde an einem Problem. Ich will einfach nur den Source Code von einer Website auslesen, also den in JavaScript dann als Variable haben, aber der Code funktioniert einfach nicht. Keine Ahnung warum. Habt ihr vielleicht Ideen?

Hinweis: Wenn ich ein alert in die onreadystatechange function mache wird dieses angezeit, doch wenn ich es in den if-Block darin einschließe nicht mehr.

...zur Frage

innerHTML nach Zeit?

Kann man es in Javascript so machen, dass z.B nach 5 sekunden nach dem laden der Website ein text durch innerHTML geändert wird?

...zur Frage

Java script onklick button?

Ich möchte ein Javascript in meine Website einbauen um die Website übersetzen zu können. Diser Stadard Google translate Code sieht jedoch sehr unschön aus und ich wollte fragen, ob/wie es geht einen Knopf einzubauen, der einen Alert oder ein Popup auslöst, indem dieses Script ausgeführt wird und man die Sprache wählen kann.

Script:

<div id="google_translate_element"></div>
            <script type="text/javascript">
                function googleTranslateElementInit() {
                    new google.translate.TranslateElement(
                        { pageLanguage: 'de' },
                        'google_translate_element'
                    );
            }
            </script>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

P.S. Falls es eine andere Möglichkeit gibt die Seite zu übersetzen (es handelt sich um einen Blog für mein anstehendes Auslandsjahr), also nur Von Deutsch zu Englisch notwendig, dass es Familie UND Gastfamilie lesen können bin ich gerne offen dafür

Danke schon einmal im Vorraus.

...zur Frage

Wie kann ich dieses JavaScript-Plugin mit HTML verbinden?

Hallo,

ich fasse mich möglichst kurz.

Ich bin gerade dabei, eine Website mit HTML & CSS für einen Minecraft Server zu erstellen. Allerdings möchte ich gerne ein JavaScript-Plugin (hier zum Plugin: https://github.com/FragLand/minestat) benutzen, mit dem ich die aktuelle Online-Spieleranzahl auf der Website anzeigen lasse.

Jedoch habe ich keinen blassen Schimmer, wie Ich das jetzt verbinde, weil ich keine Ahnung von JavaScript habe. Im Internet habe ich auch nicht wirklich viel herausfinden können.

HTML-Code:

JavaScript-Code:

...zur Frage

Javascript input zum rechnen?

Hallo,

ich habe bis hierher einen Taschenrechner gebaut. Bisher kann man folgendes tun: Man kann auf einen Button drücken und dieser Wert wird dann in einem textarea angezeigt. Nun ist es ja so, dass ich nicht einfach den value vom textarea nehmen kann und ihn einfach ausrechnen lassen kann. Deshalb meine Frage: Wie kann ich nun diesen Wert ausrechnen und anzeigen lassen? Mein bisheriger Code:

Html

<textarea name="displa" id="display" cols="40" rows="7"></textarea>
    <button value="1">1</button>
    <button value="2">2</button>
    <button value="3">3</button>
    <button value="4">4</button>
    <button value="5">5</button>
    <button value="6">6</button>
    <button value="7">7</button>
    <button value="8">8</button>
    <button value="9">9</button>
    <button value="+">+</button>
    <button value="-">-</button>
    <button value="*">*</button>
    <button value="/">/</button>
    <button onclick="summe">=</button>

Javascript

$("button").click(function() {
    const firedButtonValue = $(this).val();
    var show = $("#display").val($("#display").val() + firedButtonValue);
  });


  function summe() {
    $('#display').val() = Number(show);
  }

...zur Frage

javascript getElementById mehrere Ids ansprechen möglich?

Hallo liebe Community, derzeitig versuche ich mich bisschen in Javascript einzuarbeiten es geht um folgendes:

Ich habe auf meiner Website einen Button:

Dieser Button ändert den Text mit der ID u1, meine Frage ist wie könnte ich das so umschreiben das dieser Button sowohl den Text bei der ID u1 und u2 die Farbe ändert also mehrere Id's anspricht?

Danke im vorraus

Mein Discord: Exiter#6333

...zur Frage

Javascript Ausgabe erweitern?

Hallo,

wie kann man die Ausgabe in einem textarea feld erweitern? Ich habe unter dem Textfeld verschiedene Buttons mit verschiedenen values. Wenn ich einen Button drücke, dann soll er im Textarea-feld angezeigt werden. Wie mache ich aber nun, dass nicht nur ein value angezeigt wird, sondern so viel, wie buttons gedrückt werden. Das ist mein bisheriger Code:

Html

<textarea name="displa" id="display" cols="40" rows="7"></textarea>
    <button value="1">1</button>
    <button value="2">2</button>
    <button value="3">3</button>
    <button value="4">4</button>
    <button value="5">5</button>
    <button value="6">6</button>
    <button value="7">7</button>
    <button value="8">8</button>
    <button value="9">9</button>
    <button value="+">+</button>
    <button value="-">-</button>
    <button value="*">*</button>
    <button value="/">/</button>

Javascript

$("button").click(function() {
    var fired_button = $(this).val();
    $('#display').value = fired_button;
    break;
    return;
});

...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

CSS / JavaScript: Hilfe bei Leaflet-Integration?

Hallo Leute,

ich brauche Hilfe bei dieser Arbeit.

1. Es sollen zwei Karten nebeneinander sein. Jedoch soll die rechte Karte eine Here-Map sein. Wie baue ich das in den Code ein (siehe unten)?

Sie müssen http://ivansanchez.gitlab.io/Leaflet.TileLayer.HERE/leaflet-tilelayer-here.js in einem <script>-Tag laden. Danach müsste es mit sowas hier gehen:

L.tileLayer.here({
  appId: 'ViVS62MmsdTJSzwXMlHb',
  appCode: 'bsODmSCzkVqEMR8TnGPHdw'
}).addTo(map);

Statt addTo(map) kommt natürlich der Name Ihrer rechten Karte hin.

appId und appCode sind hier aus dem Beispiel von Ivan Sanchez http://ivansanchez.gitlab.io/Leaflet.TileLayer.HERE/demo.html

________________

2. Außerdem soll die zweite Karte sozusagen synchron/parallel mit der linken Karte verlaufen:

Sie müssen, wenn der Benutzer in der linken Karte zoomt oder sie verschiebt, die rechte Karte aktualisieren. Dazu müssen Sie eine Funktion schreiben, die aufgerufen wird, wenn auf der linken Karte das "zoomend" oder "moveend"-Ereignis auftritt.

Also etwa

map1.on("zoomend", meine_funktion);

und dann in der meine_funktion können Sie auf der rechten Karte "setBounds" aufrufen, um die rechte Karte zu verschieben/zu zoomen. Das "setBounds" muss dabei den aktuellen Ausschnitt der linken Karte übergeben bekommen (getBounds).

_________________________________________________

<html>
  <head>
    <link rel="stylesheet" href="https: //unpkg.com/leaflet@1.4.0/dist/leaflet.css"></link>
    <script src="https: //unpkg.com/leaflet@1.4.0/dist/leaflet.js"></script>
    <script src="http: //unpkg.com/leaflet@1.3.1/dist/leaflet.js"></script>
    <script>
      function initMaps() {
        map = new L.map('meine_map');
        L.tileLayer('https: //{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
        let karlsruhe = new L.LatLng(49, 8.4);
        map.setView(karlsruhe, 12);
        map1 = new L.map('meine_map1');
        L.tileLayer('http: //{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png').addTo(map1);
        map1.setView(karlsruhe, 12);

        document.getElementById("suchen").addEventListener("click", suchen);
      }

      async function suchen() {
        let url = new URL('https: //nominatim.openstreetmap.org/search');
        url.searchParams.append('format', 'json');
        url.searchParams.append('q', document.getElementById("ort").value);

        let response = await fetch(url);
        let json = await response.json();
        let box = json[0].boundingbox;

        map.fitBounds([ [ box[0],box[2] ], [ box[1],box[3] ] ]);
        map1.fitBounds([ [ box[0],box[2] ], [ box[1],box[3] ] ]);
      }
    </script>
  </head>
  <body onLoad="initMaps()">
    <div id="meine_map" style="height: 360px; width: 360px;"></div>
    <div id="meine_map1" style="position: absolute; top: 9px; left: 375px; height: 360px; width: 360px;"></div>
    <input type="text" id="ort">
    <button id="suchen">Suchen</button>
  </body>

Anmerkung: Damit der GF-Editor die URLs nicht verfälscht, wurde im Protokoll stets ein Leerzeichen hinzugefügt.

Ich danke euch für die Hilfe im Voraus!

...zur Frage

JavaScript - Formularfelder dynamisch hinzufügen?

Ich habe ein HTML-Formular. Darin soll man in eine Datenbank eine Frage mit x Antworten speichern kann. Habe folgendes als Vorlage benutzt, komme aber nicht weiter:

https://werner-zenk.de/javascript/formularfelder_dynamisch_hinzufuegen.php

Ich benötige aber neben einem Input-Feld für eine Antwort nur die Möglichkeit zur Definition, ob diese Antwort Richtig oder Falsch ist.

Habe jetzt folgendes Versucht... (Auszug für function feld_plus())

<script>
function feld_plus() {
 if (feld <= 9) {
  feld++;
 document.getElementById('dynamic_input').innerHTML = "";
  for (var counter = 1; counter <= feld; counter++) {
   var label = "Antwort " + counter;
   var inhalt = document.getElementById("antwort" + counter).value;
   document.getElementById('dynamic_input').innerHTML += "<label style=\"float: left;\">" + label + ": <input type='text' name='n_" + feld + "' value='" + inhalt + "' onInput='antwort(this.value, \"" + feld + "\")'></label><fieldset><input type='radio' id='true" + counter + "' name='statuscode' value='11'><label for='true" + counter + "'>Richtig</label> <input type='radio' id='false" + counter + "' name='statuscode' value='12'><label for='false" + counter + "'>Falsch</label></fieldset><br>";
  }
 }
}
function antwort(inhalt, feld) { document.getElementById("antwort" + feld).value = inhalt; } </script>
<a href="question_add.php"><button>Frage erstellen</button></a> <hr> <h2>Fragestellung</h2> <p>Nachfolgend die Frage eintragen...</p> <form id="question_add" action="question_action.php" method="POST" onsubmit="return confirm('Frage speichern?');"> <textarea form="question_add" name="questionText" wrap="soft" rows="2" placeholder="Wie lautet ...?" required></textarea><br> <hr> <h2>Antworten</h2> <p>Nachfolgend die Antwortmöglichkeiten angeben.</p> <p>Antworten hinzufügen <input type="button" value="-" onClick="feld_minus();"><input type="button" value="+" onClick="feld_plus();"></p>
<div id="dynamic_input"></div>
<!-- Antworten --> <input type="hidden" id="antwort1"> <input type="hidden" id="antwort2"> <input type="hidden" id="antwort3"> <input type="hidden" id="antwort4"> <input type="hidden" id="antwort5"> <input type="hidden" id="antwort6"> <input type="hidden" id="antwort7"> <input type="hidden" id="antwort8"> <input type="hidden" id="antwort9"> <input type="hidden" id="antwort10">

<hr>
<input type="submit" value="Frage speichern" >
</form>

...optisch passt dass... allerdings sind die Radio-Buttons buggy...

Definiere ist Antwort1 als richtig, und dann Antwort2 als falsch, so ist bei Antwort1 nicht mehr ausgewählt... als wenn das Fieldset nicht korrekt abgeschlossen wird.

Kennt sich damit jemand aus?

...zur Frage

Javascript Ajax Php kein Wert?

Console:

HTML javascript Code ajax:

function send(text){
   console.log("Text kurz vor versenden:\n" +text);
//hier hat er noch einen wert
   $.ajax({
     method: "POST",
     url: "DataSender.php",
     data: { text: text}
   }).done(function( response ) {
       console.log(response);
     console.log("weiterleitung

Php Code Ajax Übertragung wo es nicht geht:

      $text = $_POST['text'];
      $sql = "INSERT INTO `Xss-Data` (`ID`,`DATA`, `created_at`) VALUES (null, '{$text}' , CURRENT_TIMESTAMP)";

      if (empty($text)) {
              //das ist empty!
              echo("Error:\nEs ist leer\nText wäre\n$text");
          } else

Sind die wichtigen Code snippets

Der String hat keinen Wert. Warum? Wie löst man das?

...zur Frage

Website mit live Daten durch PHP / JavaScript?

Hallo! Ich würde gerne Daten, welche sich alle 0.1 Sekunden ändern, auf einer Website anzeigen, die sich selbst aktualisiert und so immer genau den neusten Datensatz anzeigt.

Im Internet habe ich bereits folgendes für HTML gefunden:

<meta http-equiv="refresh" content="0.1">

Dies aktualisiert die Website alle 0.1 Sekunden, dadurch braucht der Browser aber natürlich auch mehr Power, ist generell Langsamer und muss jedes mal die Seite vollständig neu laden. Die Daten sind simpel in einer Textdatei gespeichert, werden mit PHP abgefragt und anschließend mit einem echo-statement an HTML weitergegeben.

Gibt es eine elegantere Möglichkeit, die Daten anzuzeigen, ohne das der Nutzer den Browser selbst aktualisieren und die ganze Seite neu geladen werden muss?

...zur Frage

Website dauerhaft mit Javascript bearbeiten?

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <div>
      <input placeholder="Irgendwas eingeben" id="password">
    </div>
    <button onclick="password()"> Press Me</button>
    <script>
      
      function password() {
        let password = document.getElementById('password').value;
        let element = document.createElement('div');
        element.innerText = password;
        document.body.appendChild(element);
      }
    </script>
  </body>
</html>

Hi wenn ich nun die Website neu Lade dann bleiben die Divs nicht bestehen,

kann mir jemand sagen wie ich die Divs dauerhaft auch für andere clients sichtbar

behalten kann.?

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen