Insert value in input value when expanding image with javascript

Navigation
0

I have the following code (its function is to expand the image in a div where it has the id #expandedImg. 

        function myFunction(imgs) {
            var expandImg = document.getElementById("expandedImg");
            var imgText = document.getElementById("imgtext");
            expandImg.src = imgs.src;
            imgText.innerHTML = imgs.alt;
            expandImg.parentElement.style.display = "block";
            $("#expandedImg").attr('value', imgs.alt );
        }

It works perfectly, but I wanted to implement that when it expands the image it also gets the alt of the image (What works) and add inside a value of an input with hidden.

I've tried several codes to add the alt value to the value but I could not.

Below my complete code: 

function myFunction(imgs) {
  var expandImg = document.getElementById("expandedImg");
  var imgText = document.getElementById("imgtext");
  expandImg.src = imgs.src;
  imgText.innerHTML = imgs.alt;
  expandImg.parentElement.style.display = "block";

  //O quero implementar
  $("#expandedImg").attr('value', imgs.alt);
}
* {
  box-sizing: border-box;
}


/* The grid: Four equal columns that floats next to each other */

.column {
  float: left;
  width: 25%;
  padding: 10px;
}


/* Style the images inside the grid */

.column img {
  opacity: 0.8;
  cursor: pointer;
}

.column img:hover {
  opacity: 1;
}


/* Clear floats after the columns */

.row:after {
  content: "";
  display: table;
  clear: both;
}


/* Expanding image text */

#imgtext {
  position: absolute;
  bottom: 15px;
  left: 15px;
  color: white;
  font-size: 20px;
}


/* Closable button inside the expanded image */

.closebtn {
  position: absolute;
  top: 10px;
  right: 15px;
  color: white;
  font-size: 35px;
  cursor: pointer;
}
<span onclick="this.parentElement.style.display='none'" class="closebtn">&times;</span>
<img class="excluirImagem" id="expandedImg" style="width:100%">
<form>
  <input id="expandedImg" type="hidden" name="excluirImagem" value="">
  <button type="submit">Excluir imagem</button>

</form>
<div id="imgtext"></div>

<div class="row">
  <div class="column">
    <img src="https://www.w3schools.com/howto/img_nature.jpg"alt="Nature" style="width:100%" onclick="myFunction(this);">
  </div>
  <div class="column">
    <img src="https://www.w3schools.com/howto/img_nature.jpg"alt="Snow" style="width:100%" onclick="myFunction(this);">
  </div>
  <div class="column">
    <img src="https://www.w3schools.com/howto/img_nature.jpg"alt="Mountains" style="width:100%" onclick="myFunction(this);">
  </div>
  <div class="column">
    <img src="https://www.w3schools.com/howto/img_nature.jpg"alt="Lights" style="width:100%" onclick="myFunction(this);">
  </div>
</div>
    
asked by anonymous 13.11.2018 / 16:23

1 answer

0

Use expandImg.value to receive the value. 

function myFunction(imgs) {
  var expandImg = document.getElementById("expandedImg");
  var imgText = document.getElementById("imgtext");
  expandImg.src = imgs.src;
  imgText.innerHTML = imgs.alt;
  
  expandImg.parentElement.style.display = "block";

  //O quero implementar
  expandImg.value =  imgs.alt
  console.log("Valor do hidden: " +  document.getElementById("expandedImg").value);
}
* {
  box-sizing: border-box;
}


/* The grid: Four equal columns that floats next to each other */

.column {
  float: left;
  width: 25%;
  padding: 10px;
}


/* Style the images inside the grid */

.column img {
  opacity: 0.8;
  cursor: pointer;
}

.column img:hover {
  opacity: 1;
}


/* Clear floats after the columns */

.row:after {
  content: "";
  display: table;
  clear: both;
}


/* Expanding image text */

#imgtext {
  position: absolute;
  bottom: 15px;
  left: 15px;
  color: white;
  font-size: 20px;
}


/* Closable button inside the expanded image */

.closebtn {
  position: absolute;
  top: 10px;
  right: 15px;
  color: white;
  font-size: 35px;
  cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><spanonclick="this.parentElement.style.display='none'" class="closebtn">&times;</span>
<img class="excluirImagem" id="expandedImg" style="width:100%">
<form>
  <input id="expandedImg" type="hidden" name="excluirImagem" value="">
  <button type="submit">Excluir imagem</button>

</form>
<div id="imgtext"></div>

<div class="row">
  <div class="column">
    <img src="https://www.w3schools.com/howto/img_nature.jpg"alt="Nature" style="width:100%" onclick="myFunction(this);">
  </div>
  <div class="column">
    <img src="https://www.w3schools.com/howto/img_nature.jpg"alt="Snow" style="width:100%" onclick="myFunction(this);">
  </div>
  <div class="column">
    <img src="https://www.w3schools.com/howto/img_nature.jpg"alt="Mountains" style="width:100%" onclick="myFunction(this);">
  </div>
  <div class="column">
    <img src="https://www.w3schools.com/howto/img_nature.jpg"alt="Lights" style="width:100%" onclick="myFunction(this);">
  </div>
</div>
    
13.11.2018 / 16:37
Commit on the wrong branch How to move a file to a folder that the code itself created? (python)