Zamiana hiperłącza w JS,jak to zrobić.

pytanie zadane 4 września 2020 w JavaScript przez Nickowy3456 Użytkownik (610 p.)

Witajcie.

Pomysł miałem taki. Zrobić taki slider na stronie HTML. Plan był taki że zmienia się obrazek co X sekund i jest możliwość najechania na to myszką i ten div będzie hiperłączem do strony X.Próbowałem to wykonać,lecz nie udało się. Chciałem jak w kursie pana Mirosława Zelenta zrobić coś takiego

//zrobić zmienną 
var zmienna = "<a href=\"index.html\" />";

document.getElementById("cos").innerHTML = zmienna; 

//jak to wykonac bo to nie działa

Chyba że to jest to,a ja jakiś błąd popełniłem.

komentarz 6 września 2020 przez ScriptyChris Mędrzec (190,190 p.)

Czy w konsoli są jakieś błędy?

komentarz 6 września 2020 przez Nickowy3456 Użytkownik (610 p.)

Nie bardzo.

komentarz 6 września 2020 przez ScriptyChris Mędrzec (190,190 p.)

To pokaż więcej kodu (najlepiej cały, jeśli nie ma go zbyt dużo). Doprecyzuj też co nie działa.

2 odpowiedzi

odpowiedź 6 września 2020 przez Dylekter Użytkownik (670 p.)

Jeżeli ten kod wygląda prawie identycznie jak napisałeś w js to spróbuj dodać tag zamykający:

var zmienna = "<a href=#></a>";
 
document.getElementById("cos").innerHTML = zmienna;

lub zapisać to tak:


document.getElementById("cos").innerHTML = "<a href=#></a>";

Przynajmniej tak mi się wydaje że powinno być dobrze

komentarz 6 września 2020 przez Nickowy3456 Użytkownik (610 p.)

Nie działa

odpowiedź 7 września 2020 przez VBService Ekspert (256,600 p.)
edycja 8 września 2020 przez VBService

Może się przyda?

<style>
* {
  box-sizing: border-box;
}
.slide_link_demo_1 {
  text-decoration: none;
  overflow: hidden; 
}
.slide_img_demo_1 {
  width: 350px;
  height: 200px; 
} 

.wrapper_demo_2 {
  position: relative;
  width: 350px;
  height: 200px;
  border: 0;
  margin-top: 1em;
  padding: 0;
}
.wrapper_demo_2 .slide {
  width: 100%;
  height: 100%;
  border: 0;
  background-size: cover;
  transition: background-image 1s ease-in-out;
}
.wrapper_demo_2 .title {
  position: absolute;
  width: 100%;
  height: 1.8em;
  background-color: gray;
  opacity: 0.7;
  border: 0;
  bottom: 0;
  font-size: 0.8em;
  font-variant: small-caps;
  padding: 0.4em 0.5em;
  overflow: hidden;
  color: yellow;
  border-top-left-radius: 1em;
  text-overflow: ellipsis;
  white-space: nowrap;
  animation: color 2.001s ease-out infinite;
}

@keyframes color {
  from { color: yellow; }
   80% { color: yellow; }
   90% { color: gray; }
   98% { color: gray; }
    to { color: yellow; }
}
</style>
<body>
  <a id="slide_link_demo_1" class="slide_link_demo_1" href="" target="blank_">
    <img id="slide_img_demo_1" class="slide_img_demo_1" src=""><br>
    <span id="slide_title_demo_1"></span>
  </a>

  <div id="slide_wrapper_demo_2" class="wrapper_demo_2">
    <a id="slide_link_demo_2" class="link" href="" target="blank_">
      <div id="slide_img_demo_2" class="slide"></div>
      <div id="slide_title_demo_2" class="title"></div>
    </a>
  </div>
</body>
<script>
const slide_link_demo_1 = document.getElementById("slide_link_demo_1");
const slide_img_demo_1 = document.getElementById("slide_img_demo_1");
const slide_title_demo_1 = document.getElementById("slide_title_demo_1");

const slide_link_demo_2 = document.getElementById("slide_link_demo_2");
const slide_img_demo_2 = document.getElementById("slide_img_demo_2");
const slide_title_demo_2 = document.getElementById("slide_title_demo_2");

const base_img_src = "https://buildasite.info/wp-content/uploads/";
const img_src = ["2017/12/1512310536_maxresdefault-370x208.jpg",
                  "2017/12/1513737203_maxresdefault-370x208.jpg",
                  "2018/01/1515639597_maxresdefault-370x208.jpg",
                  "2017/12/1512548258_maxresdefault-370x208.jpg",
                  "2017/05/1494434756_maxresdefault-370x208.jpg",
                  "2018/01/1515468788_maxresdefault-370x208.jpg"];

const base_link_href = "https://miroslawzelent.pl/";
const link_href = ["kurs-javascript/skrypty-js-pierwszy-projekt/",
                   "kurs-javascript/mechanika-skryptu-uchwyty-funkcje-zdarzenia/",
                   "kurs-javascript/przetwarzanie-lancuchow-gra-wisielec/",
                   "kurs-javascript/jquery-gra-w-pamiec/",
                   "kurs-html/przyjazne-adresy-linkowanie-podstron-fontello/",
                   "kurs-php/poznajemy-biblioteke-pdo/"];

const link_title = ["01. SKRYPTY PO STRONIE KLIENTA - PIERWSZY PROJEKT",
                    "02. MECHANIKA DZIAŁANIA SKRYPÓW: UCHWYTY, FUNKCJE, ZDARZENIA",
                    "03. GRA W WISIELCA. PRZETWARZANIE ŁAŃCUCHÓW",
                    "05. POZNAJEMY JQUERY. GRA W PAMIĘĆ",
                    "03. LINKOWANIE PODSTRON, PRZYJAZNE ADRESY, FONTELLO",
                    "05. POZNAJEMY BIBLIOTEKĘ PDO"];

(() => {
  slide_img_demo_1.src = base_img_src + img_src[0];
  slide_link_demo_1.href = base_link_href + link_href[0];
  slide_title_demo_1.textContent = link_title[0];
  
  slide_img_demo_2.style.backgroundImage = `url('${img_src[0]}')`;
  slide_link_demo_2.href = link_href[0];
  slide_title_demo_2.textContent = link_title[0]; 
}).call(this);

let img_full_src = "";
let link_full_href = "";

const length = img_src.length - 1;
let index = 0;

setInterval(() => {
  index += (index >= length) ? -length : 1;
  img_full_src = base_img_src + img_src[index];
  link_full_href = base_link_href + link_href[index];
  
  slide_img_demo_1.src = img_full_src;
  slide_link_demo_1.href = link_full_href;
  slide_title_demo_1.textContent = link_title[index];  
  
  slide_img_demo_2.style.backgroundImage = `url('${img_full_src}')`;
  slide_link_demo_2.href = link_full_href;
  slide_title_demo_2.textContent = link_title[index]; 
}, 2000, index);
</script>

CodePen