Question 219285 in Html Question posted in
Some basic documentation can be found here.

Html – How to make using JS, between "H1 and /H1" to automatically insert the text from the "Alt" of the photo?

function altToH1(){ 
   document.getElementById("Obsada").innerHTML = "alt";
}
.flip-card {
  background-color: transparent;
  width: 200px;
  height: 300px;
  perspective: 1000px;
  display: inline-block;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.flip-card-front {
  background-color: #5bccf6;
  color: white;
  font-weight: 900;
}

.flip-card-back {
  background-color: #5bccf6;
  color: white;
  transform: rotateY(180deg);
}
<div class="Obsada">
<div class="flip-card">
  <div class="flip-card-inner">
    <div class="flip-card-front">
      <h1></h1>
    </div>
    <div class="flip-card-back">
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f1/Heart_coraz%C3%B3n.svg/800px-Heart_coraz%C3%B3n.svg.png" alt="test test" style="width:200px;height:300px;">
    </div>
  </div>
</div>

**
The point is that without filling h1 , using Javascript, it should be automatically filled in from the "alt" text of the photo.
For example: ‘h1 /h1’ to replace ‘h1’photo alt text’ /h1’**
I am not experienced in coding so please bear with me

Tags:

2

Answers


  1. 0

    You have a few problems here:

    • The Obsada element seems to be missing a closing </div> tag
    • You are trying to use getElementById to select an element that does not have an ID. It has a class class='Obsada'
    • If that element were selected you would have just replaced everything inside of it with the literal text "alt"
    • you have an altToH1() function but you never call it anywhere, so it never runs.

    So to fix these issues, I am going to:

    • put a closing <div> tag at the end
    • change the selector to properly target the elements you want
    • get the alt text and put it where you want
    • call the function to make it run
    function altToH1(){ 
  var imageElement = document.querySelector(".Obsada img");
  var h1Element = document.querySelector(".Obsada h1");
  
  h1Element.innerHTML = imageElement.alt;
}

altToH1(); //call the above function
    .flip-card {
  background-color: transparent;
  width: 200px;
  height: 300px;
  perspective: 1000px;
  display: inline-block;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.flip-card-front {
  background-color: #5bccf6;
  color: white;
  font-weight: 900;
}

.flip-card-back {
  background-color: #5bccf6;
  color: white;
  transform: rotateY(180deg);
}
    <div class="Obsada">
  <div class="flip-card">
    <div class="flip-card-inner">
      <div class="flip-card-front">
        <h1></h1>
      </div>
      <div class="flip-card-back">
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f1/Heart_coraz%C3%B3n.svg/800px-Heart_coraz%C3%B3n.svg.png" alt="test test" style="width:200px;height:300px;">
      </div>
    </div>
  </div>
</div>
    Login or Signup to reply.
  2. 0

    if you want to wright "alt" in h1 tag you should mentioned h1 in script code like:
    document.querySelector(".Obsada h1").innerHTML ="alt"

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search