Create code template from input javascript

Question

I'm trying to make app that generates code with HTML tags from images.

User pastes an image link, image displays and after that user will click button to generate the img code to copy.

I've got code that loads and previews images from input.

I'm struggling with generating the HTML code. User will get: <img src="link photo"> in div code.

I can't make it:

document.getElementById('code').innerHTML = '<img src=" ' + source + '">';

Because it won't display HTML tags.

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title></title>
  <style>
      img {
      width: 10%;
      height: 10%;
      border-radius: 10px;
      box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
      opacity: 85%;
  </style>
</head>

<body>
  <form>
    <input type="text" id="imagename" value="" />
    <input type="button" id="btn" value="Show" />
  </form>
  <div id="before">
  </div>
  <div>
    <p>HTML`s code to copy:</p>
  </div>
  <div name="code" id="code">
  </div>
  <script type="text/javascript">
    document.getElementById('btn').addEventListener("click", fun);

    function fun() {
      var val = document.getElementById('imagename').value;
      source = val;
      img = document.createElement('img');
      img.src = source;
      document.body.appendChild(img);
      // move child to up
      var before = document.getElementById('before');
      before.insertBefore(img, before.children[0]);

      document.getElementById('code').innerHTML = '<img src=" ' + source + '">';

    }
  </script>
</body>

</html>

disinfor · Accepted Answer · 2022-09-13 22:03:28Z

1

Don't use innerHTML, use innerText:

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title></title>
  <style>
      img {
      width: 10%;
      height: 10%;
      border-radius: 10px;
      box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
      opacity: 85%;
  </style>
</head>

<body>
  <form>
    <input type="text" id="imagename" value="" />
    <input type="button" id="btn" value="Show" />
  </form>
  <div id="before">
  </div>
  <div>
    <p>HTML`s code to copy:</p>
  </div>
  <div name="code" id="code">
  </div>
  <script type="text/javascript">
    document.getElementById('btn').addEventListener("click", fun);

    function fun() {
      var val = document.getElementById('imagename').value;
      source = val;
      img = document.createElement('img');
      img.src = source;
      document.body.appendChild(img);
      // move child to up
      var before = document.getElementById('before');
      before.insertBefore(img, before.children[0]);

      document.getElementById('code').innerText = '<img src="' + source + '">';

    }
  </script>
</body>

</html>

answered Sep 13, 2022 at 22:03

disinfor

11.6k2 gold badges37 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Vizzini Over a year ago

I was trying to do in same way with <style> tag but it doesnt work. Any solutions?

disinfor Over a year ago

What do you want your style tag to look like?

Vizzini Over a year ago

I`ve got style tag and want to print on display as like as used to innerText to copy and paste.

Collectives™ on Stack Overflow

Create code template from input javascript

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related