JavaScript Buton la resim değiştirme ve linke yönlendirme

05-01-2021, 23:37:09

Merhabalar aldığım bir derste verilen js ödevinde bir buton var ve bu butona tanımlı bir resim var ve resme tıkladıgımda bir linke yönlendiriyor.İstenen şey ise Set Attribute methoduyla butona tıkladıgımda başka bir resim gelsin ve bu resimden başka bir linke gidilsin.
Uğraşıyorum ancak herhangi bir sağlıklı kaynağa rastlamadım.

Bu Konuda yardım edebilecek birileri var mıdır ?

<!DOCTYPE html><html>
<body>
<a href="https://www.nba.com/bulls" target="_blank"><img src="jordan.jpg" width="600" height="400"></a>
<br><br>
<button onclick="myFunction()">Click here to change the image and hyperlink</button>
<script></script>
<h3>Set Attribute Exercise</h3>
<p>1) In the function "myFunction()", which will be called when you click on the button, use the "document.getElementsByTagName()" method together with the "setAttribute" method for changing the "href" value of the hyperlink as "https://www.nba.com/lakers" and the "src" value of the image as "bryant.jpg".</p>
</body></html>

06-01-2021, 00:04:34

#2

darness

function myFunction() {
const a = document.getElementsByTagName('a')[0];
const img = a.getElementsByTagName('img')[0];
a.setAttribute('href', 'https://www.nba.com/lakers');
img.setAttribute('src', 'bryant.jpg');
}

06-01-2021, 00:15:25

#3

yusufsaid

en mantıklısı slider ile bunu yapmak ama bunlarıda inceleyebilirsin.

let data = [
 { id: 0, href: "#adres1", url: "https://placehold.it/1000x1000" },
  { id: 1, href: "#adres2", url: "https://placehold.it/900x1000" },
  { id: 2, href: "#adres3", url: "https://placehold.it/800x1000" }];
const btn = document.querySelector("#btn");
const img = document.querySelector("#img");
const target = document.querySelector("#target");
let currentIndex=0;btn.addEventListener("click", (e) => {
 let currentId = target.dataset.id;
data.map((m, index) => {  
 if (currentId == m.id) {    
currentIndex=data.length===index+1 ? 0 :index+1
    } });  
img.setAttribute("src",data[currentIndex].url)
target.setAttribute("href",data[currentIndex].href)
target.setAttribute("data-id",data[currentIndex].id)});

  <a id="target" href="#adres1" data-id="2">            
<img id= "img" src="https://placehold.it/1200x1000">                    
 </a>                  
<button id="btn" >Tıkla</button>