Javascript mit onclick-Attribut ändern?

Hallo,

wie kann ich mit JavaScript ein Attribut ändern, wenn ich auf das entsprechende Objekt klicke?

Bis jetzt habe ich folgenden Code:

<img src="bild.png" onclick="elem.setAttribute("src","anderesbild.png");">

1 Antwort

regex9

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Computer, HTML, Webseite

08.04.2020, 22:00

So:

<img alt="Bildbeschreibung ..." onclick="this.setAttribute('src', 'anderesbild.png')" src="bild.png">

Wobei es besser ist, JavaScript und HTML besser voneinander zu trennen, um die Übersicht zu wahren.

<img alt="Bildbeschreibung ..." id="image" src="bild.png">
<script>
  document.getElementById("image").addEventListener("click", function(e) {
    this.setAttribute("src", "anderesbild.png");
    this.setAttribute("alt", "Neue Bildbeschreibung ..."); // maybe
  });
</script>

gehm1

Fragesteller

09.04.2020, 09:21

Danke!

Hallo,

ich möchte mit Hilfe von JavaScript einen Button, der vorher disabled war, wieder aktiviert, sodass er undisabled ist. Die funktioniert leider nicht und ich habe kein Ahnung an was es liegen könnte.

Mein HTML Code:

<body>

</body>

}

Mein Javascript Code:

let button = document.getElementbyid('button' );

function Test() {

button.disabled = false;

}

Weiß jemand an was es liegen könnte?

...zur Frage

CSS-onclick?

Hallo, ist es möglich, dass ich die Farbe von einem Button ändern kann, wenn ich draufklicke? Gibt es da so etwas wie "onclick", wie bei JavaScript?

...zur Frage

2 Bilder hin und her tauschen per onklick in JavaScript?

Hallo, ich würde gerne die src von 1 nem Bilder per onclick in JavaScript verändern das es ein anderes zeigt. Mein Ansatz lautet wie folgt:

<!DOCTYPE html>
<html>
    <head></head>
    <body>
        
        <script type="text/javascript">
 
            function klick() { 
  var pic = document.getElementById('picswap').style.backgroundImage; 
  if(pic == src="menu.png") { 
    pic = src="close.png"; 
  } else { 
    pic = src="menu.png"; 
  } 
}
        </script>
        
        <a onclick="klick()" href="#"><img  id="picswap" src="menu.png"></a>
 
        
    </body>
</html>

Nur leider funktioniert das nicht :/ Kann mir jemand helfen?

LG. Sebastian

...zur Frage

Bild wird nicht angezeigt(HTML)?

Hallo,

ich habe grad mit HTML programmieren angefangen doch nun komme ich nicht weiter:

So hab ich es eingegeben doch das Bild wird nicht angezeigt bzw. nur so ein kleines komisches Symbol().

Danke für alle Antworten im vorraus!

...zur Frage

Javascript Formular mit Placeholder rechnen?

Hallo,

ich habe folgenden Code:

<html>
    <head></head>
    <body>
        <input type="number" id="in1" placeholder="0">
        <input type="number" id="in2" placeholder="0">
        <input type="number" id="out">
        <input type="button" value="Weiter" onclick="
            out.value = parseFloat(in1.value) + parseFloat(in2.value);
        ">
    </body>
</html>

Wenn ich in ein Feld nichts eingebe, doll Javascript den placeholder (also 0) als Inhalt ansehen und mit diesem Wert weiterrechnen. Es klappt aber leider noch nicht. Kann mir da wer helfen?

...zur Frage

Html & CSS Ordner Verlinken?

Guten Tag Leute,

Ich bin ein frischer anfänger was programmieren angeht. Ich bin dabei Bilder einzufügen und die Bilder sind in ein anderen Ordner. Im Netz wurde gesagt (ordner name img ich will blume.jpg einfügen)

das der Code so ist : <img src="/img/blume.jpg/"> auch ein Code der da war war
<img src="img/blumejpg/">

Ich habe beide codes ausprobiert und beide funktionierten nicht.
Ich freue mich über jede hilfe vorab schonmal danke.

MFG,
Daniel P.

...zur Frage

Wie erstelle ich eine Seite,wo das Audiodatei automatisch spielt?

Hallo Leute,

Zurzeit beschäftige ich mich mit Javascript und möchte,dass bei einer Seite die Audiodatei automatisch anfängt zu spielen,sobald ich die seite öffne.

Das ist mein Javascript Code:

function ton() {

var audio=document.getElementById("audio");

audio.innerHTML='<audio autoplay><source src="WIN_20211211_16_26_17_Pro.mp4" type="audio/mpeg"/></audio>';

}

</script>

...zur Frage

JavaScript: Wie kann ich ein Bild in mein Canvas einfügen?

Servus!

Ich möchte gerne ein Bild in mein Canvas einfügen. Es klappt aber nicht und die Konsole zeigt auch keine Fehlermeldungen an.

Ich habe folgenden Code:

var canvas = document.getElementById("gameScreen");
var context = canvas.getContext("2d");
var imgBall = document.getElementById('img_ball');

function make_ball() {
  imgBall = new Image();
  imgBall.onload = function() {
    context.drawImage(imgBall, 10, 10);
  }
}

make_ball();

In der HTML-Datei habe ich noch src und die id (img_ball) in das img-Tag geschrieben.

Vielleicht findet ja von euch jemand den Fehler.

Dankeschön.

...zur Frage

Wie lässt man ein Objekt mit Javascript springen?

Hallo.

ich möchte ein Spiel erstellen, nur komme ich nun nicht weiter.

Ich habe ein Objekt und ein Hintergrund erstellt, um eine Art Spiel wie doodle jumper zu erstellen, aber egal was ich tue, mein Objekt kann sich nicht bewegen, geschwiege denn hoch springen.

Könnte mir jemand sagen, wie man das hinbekommen könnte, dass das Objekt sich bewegt oder noch besser hoch springt?

Code steht im Anhang.

MfG

...zur Frage

Bild wechsel mit Javascript?

Hey,

ich hab da eine Frage zum Thema Javascript. Undzwar möchte ich das sich mit jedem Reload ein Bild ändert (am besten random aus einer "Bildliste" ausgesucht).

Das hier ist der Code den ich derzeit versucht habe... allerdings kommt immer wieder der Fehler das er die Bilder nicht finden konnte...

var imagenumber = 3 ;

var randomnumber = Math.random() ;

var rand1 = Math.round( (imagenumber-1) * randomnumber) + 1 ;

images = new Array

images[1] = "bild1.png"

images[2] = "bild2.png"

images[3] = "bild3.png"

var image = images[rand1]

document.write('<IMG SRC="' + image + '">')

Wäre nett wenn mir jemand mit dem Problem helfen könnte.

...zur Frage

Html/CSS/Javascript Website Bild wird nicht angezeigt?

Hi, will dass das erste Bild direkt angezeigt wird und das der Beispieltext rechts steht. Wegen Zeichen kurz gehalten. Danke!

<div class="mySlides" id="expandedImg">
<img src="bilder/schuh.jpg" style="width:35%">
</div>
<div class="mySlides">
<img src="bilder/schönschuh.jpg" style="width:35%">
</div>
<div class="mySlides">
<img src="bilder/mann.jpg" style="width:35%">
</div>
<div class="mySlides">
<img src="bilder/lederschuh.jpg" style="width:35%">
</div>
<div class="mySlides">
<img src="bilder/basketball.jpg" style="width:35%">
</div>
<div class="caption-container">
<p id="caption"></p>
</div>
<div class="row">
<div class="column">
<img class="demo cursor" src="bilder/schuh.jpg" style="width:90%" onclick="currentSlide(1)" alt=""></div>
<div class="column">
<img class="demo cursor" src="bilder/schönschuh.jpg" style="width:90%" onclick="currentSlide(2)" alt="">
</div>
<div class="column">
<img class="demo cursor" src="bilder/mann.jpg" style="width:90%" onclick="currentSlide(3)" alt="">
</div>
<div class="column">
<img class="demo cursor" src="bilder/lederschuh.jpg" style="width:90%" onclick="currentSlide(4)" alt="">
</div>
<div class="column">
<img class="demo cursor" src="bilder/basketball.jpg" style="width:90%" onclick="currentSlide(5)" alt="">
</div>
</div>
</div> 
<div class="text">
<a>Beispieltext</a>
<p>Beispieltext...</p>
</div>
* {box-sizing: border-box;}
.container {
position: relative;
margin-top: 80px;
}
.mySlides {
display: none;
margin-bottom: -45px;
margin-top: 65px;
margin-left: 10px;}
.cursor {cursor: pointer;}
.prev,
.next {
cursor: pointer;
position: absolute;
top: 300px;
width: auto;
padding: 16px;
color: rgb(0, 0, 0);
font-weight: bold;
font-size: 20px;
border-radius: 0 3px 3px 0;
user-select: none;
-webkit-user-select: none;}
.next {
right: 0;border-radius: 3px 0 0 3px;} 
.prev:hover,
.next:hover {background-color: rgba(211, 211, 211, 0.8);}
.caption-container {text-align: center; background-color: rgb(255, 255, 255);color: white;}
.row:after {content: ""; display: table; clear: both;}
.column {float: left; width: 7%;}    
.demo {opacity: 0.6;}
.active,
.demo:hover {opacity: 1;}
.row {margin-top: 65px; margin-left: 10px;}
.text {display: flex; justify-content: flex-end; width: 40%;}
var slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
showSlides(slideIndex += n);
}

function currentSlide(n) {
showSlides(slideIndex = n);}

function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("demo");
var captionText = document.getElementById("caption");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
captionText.innerHTML = dots[slideIndex-1].alt;}

...zur Frage

HTML mehrere onclick?

<script>function play() {var audio = document.getElementById("sd_00143");audio.play();}</script><a href="#A1Acura RSX SH_"><img src="bilder/NFSU2/A1Acura RSX SH_.jpg" id="A1Acura RSX SH_" width="220" height="120" onclick="play()"><audio id="sd_00143" src="sd_00143.mp3"></audio></a>

<script>function play() {var audio = document.getElementById("Sexy Beam");audio.play();}</script><a href="#B4Audi A3 nude tits_"><img src="bilder/NFSU2/B4Audi A3 nude tits_.jpg" id="B4Audi A3 nude tits_" width="220" height="120" onclick="play()"><audio id="Sexy Beam" src="Sexy Beam.wav"></audio></a>

Beide Bilder spielen beim Anklicken Sexy Beam.wav. Kann jemand die multiplen Audiodateiaufrufe in einer einzigen HTML-Seite korrigieren?

...zur Frage

Beim klicken auf ein Bild eine PHP-Funktion ausführen?

Guten Tag!

Ich versuche jetzt schon seit längerem, bei einem Klick auf ein Bild eine PHP Funktion aufzurufen - OHNE Reload - Also, Beispiel:

<a onclick='führe php funktion aus'><img src='iwas.png'></a>

Ich habe nach ergiebigem Googlen öfters etwas von "AJAX" gehört - Jedoch nie ein Tutorial gefunden.. Könnte mir jemand vielleicht aus der Patche helfen?

MfG

...zur Frage

Wie kann ich in JavaScript Zahlen untereinander ausgegeben?

Ich habe folgenden Code und ich will das die Zahlen untereinander ausgegeben werden

Danke im voraus

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen