How to get the input answer, and then put it on a html tag

byMR

March 28, 2023

I don’t know how to save the link that the user put and then put it on the image tag.

IMPORTANT: I’m using jquery by the way

Here is how my code looks

Also you can see it down here

<!DOCTYPE html>
<html>
  <head>
    <title>Superhero Cards Maker</title>
    <link rel="stylesheet" href="style.css" />
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
  </head>
  <body>
    <h2 id="h2">Superhero Cards Maker</h2>
    <div class="input">
      <label>Put the link of your image </label>
      <input id="input" type="text" placeholder="https://images.hdqwalls.com/download/i-am-iron-man-avengers-endgame-5k-4r-1280x720.jpg"
      />
    </div>
    <div class="options">
      <button class="submit-btn">Submit</button>
      <button id="add-card">Add Card</button>
    </div>
    <div class="cards-template">
      <div class="card"></div>
    </div>
    <div class="cardbook"></div>
  </body>
  <script>
    $(".cards-template").hide();
    function addCard() {
      var noteHtml = $(".cards-template").html();
      $(".cardbook").prepend(noteHtml);
      let image =$('.input')
      console.log(image)
      $(".card").append('<h3 class="title" contenteditable="true">Type the name of your hero here (delete this)</h3><p class="content" contenteditable="true">Type the description here (delete this)</p><img src="">')
    }
    $("#add-card").click(addCard);
  </script>
</html>

What I want to do:
So imagine you are a user that wants to create a superhero card, you have a title, content and your image, there is a input field that let you put your image link adress, then the website will save that link put it on the src of the html image tag, and create your card with the heading and the paragraph of course.

What I try:
I try to save the content of my input field into a variable and then just show it into the console to see if I can see the link that the user put, but it says null

<script>
    $(".cards-template").hide();
    function addCard() {
      var noteHtml = $(".cards-template").html();
      $(".cardbook").prepend(noteHtml);
      let image =$('.input')
      console.log(image)
      $(".card").append('<h3 class="title" contenteditable="true">Type the name of your hero here (delete this)</h3><p class="content" contenteditable="true">Type the description here (delete this)</p><img src="">')
    }
    $("#add-card").click(addCard);
  </script>

>Solution :

After you get the value with val() method you can select image with jQuery selector and after that you can set src attribute and img tag with attr() method. I’ve added an id attribute of input to the input field so that it can be selected using the #input selector.

Here is a snippet. Hope it helps.

function addCard() {
      var noteHtml = $(".cards-template").html();
      $(".cardbook").prepend(noteHtml);
      
      // get the value of the input field
      var imageUrl = $("#input").val();
    
      // select the img tag and set its src attribute
      $(".card img").attr("src", imageUrl);
    
      // append the heading and paragraph tags
      $(".card").append('<h3 class="title" contenteditable="true">Type the name of your hero here (delete this)</h3><p class="content" contenteditable="true">Type the description here (delete this)</p>');
}