0

I just created the img tag in HTML using document.write in javascript.

This is a matter to postpone later, and what I want to make is to freely place the img tag with the number id in the box as shown in the picture below:

enter image description here

I thought I could create a css grid and specify a variable for each column (for example, _0101, _0102...) and make it (e.g.) #id_number {position: '_0101'; }.

//index.html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="test.css" type="text/css">
        <title>title</title>
        <script src="test.jsp"></script>
    </head>
<body>
    <script>
        document.addEventListener("DOMContentLoaded", upload());
    </script>
</body>
</html>

//test.jsp
function upload() {
    var iSet = '';
    for(var i = 1; i < 301; i++) {
        if (i < 10) {
            iSet='00' + i;
        } else if (i < 100) {
            iSet='0' + i;
        } else {
            iSet=i;
        }
        document.write("<img class='_"+i+"' src='./img/" + iSet +".webp' style='width:10%' onclick='changeStyle(" + i + "); save();' onerror=\"this.style.display='none'\">");
    }
}

First, The created image can often be repositioned. In the picture above, the id="1" image is in [1, 1] but I would like to be able to do it as a column because I might need to change it to [1, 2]. Of course, if it's not possible, I'll put it in absolute position (then I want to know if I can manage the coordinates of absolute position by putting it in a variable).

Thank you very much for your reply and I hope you have a good day.

Pedro A
  • 3,989
  • 3
  • 32
  • 56
Luke Park
  • 13
  • 3
  • 1
    First of all, don't use `document.write`. Use `document.createElement` instead. [Learn more here](https://javascript.info/modifying-document). If you are going to change the place of the img within your grid, you will need to move the element itself around, by calling methods that operate directly on the element, such as `.append` (which you can find in that same page). – Pedro A Jul 27 '22 at 16:25
  • Also when defining the listener you should use simply `upload` instead of `upload()` because you have to pass _the function itself_, not the result of calling it. – Pedro A Jul 27 '22 at 16:26
  • @PedroA Thanks to you, the code is easier to read. By the way, can't you give me an answer about css? And I wonder why there is a difference between upload() and upload. If there is (), the img you put in as a test will be generated later, and if there is no (), the img will be generated first. – Luke Park Jul 28 '22 at 09:27
  • I don't know if you can achieve what you want simply with css. Given that you already have javascript code to generate HTML, why not use javascript to also move the img around when you need it? The link I gave you above will help you to know how. As for `upload()` vs `upload`, in the former case you are calling the function immediately, so it happens first, while on the latter you are setting the function as handler to an event, in which case it will only be called when the event fires, which is a little later. – Pedro A Jul 28 '22 at 13:50

0 Answers0