Repeat image for x input in form-CodePudding

I have this code. I want to repeat the image "chocci.png" for (length in form) times horizontally and (height in form) times vertically. I have tried multiple solutions but they have all failed so I am looking for help online.

edit

To clarify: I don't want to use the image as background for the page, I simply want to display it a certain amount of times vertically and horizontally (that depend on what the user inputs in the form) in my page. This is what I've tried to do this thus far:

var button = document.getElementById("submit");

function imgRep(){
    x = document.getElementById("length").value;
    y = document.getElementById("height").value;
    if (x > 10 || y > 10){
        alert("Please choose a valid value ranging from 1 to 10 for the size!");
        return;
    }
    for (var i = 0; x*y; i  ) {
        $("#choc").append($(".choc").last().clone(true));
    }
}
          
button.onclick = function() {
    imgRep();
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
   <form id="grid">
      Desired Height: <input type="text" id="height">
      Desired Length: <input type="text" id="length">
      <input type="button" value="Submit" id="submit">
   </form>
</div>
...
<div id="choc">
    <img src="../img/chocci.png" class="choc">
</div>

CodePudding user response：

The first snippets shows the version attempting to use background-image and scaling the image using percentage values. It does not obey both x & y scaling though so the second snippet is more appropriate. I placed the souce image off-screen within a template and cloned it within the nested loops - nested for rows and columns.

Show code snippet

const d=document;
const form=d.forms.grid;

document.querySelector('[type="button"]').addEventListener('click',(e)=>{
  let root=d.documentElement;
      root.style.setProperty('--x', `${1 / form.length.value * 100}%` );
      root.style.setProperty('--y', `${1/ form.height.value * 100}%` );

      console.log(
        'background-size:%s,%s',
        window.getComputedStyle( root,null ).getPropertyValue( '--x' ),
        window.getComputedStyle( root,null ).getPropertyValue( '--y' )
      )
});

:root{
  --x:100%
  --y:100%;
}

#choc{
  width:400px;
  height:400px;
  
  background-image:url( https://media.bodyandfit.com/i/bodyandfit/chocolate-moment_Image_01?locale=en-gb,*&layer0=$PDP_003$&fmt=webp );
  background-size:var(--x), var(--y);
}

<div>
  <form name="grid">
    Desired Height: <input type="text" name="height" />
    Desired Length: <input type="text" name="length" />
    <input type="button" value="Submit" />
  </form>
</div>
<div id="choc"></div>

const d=document;
const q=(e,n=d)=>n.querySelector(e);
const form=d.forms.grid;



document.querySelector('[type="button"]').addEventListener('click', (e) => {
  let choc = q('#choc');
      choc.innerHTML='';

  if( form.height.value>10 )form.height.value=10;
  if( form.length.value>10 )form.length.value=10;

  for( let y=0; y < form.height.value; y   ){

    let div=d.createElement('div');
    choc.appendChild( div );

    for( let x=0; x < form.length.value; x   ){
      div.appendChild( q('img', q('template').content).cloneNode(true) )
    }
  }
});

body,body *{
  box-sizing:border-box;
}
#choc{
  width:100%;

  display:flex;
  flex-direction:column;
}
#choc > div{
  margin:0;
  width:100%;
  display:block;
}
#choc > div > img{
  margin:0;
  float:left;
  clear:none;
  width:100px;
  display:inline-block;
}

<div>
  <form name='grid'>
  Desired Height: <input type='number' name='height' min=1 max=10 step=1 value=1/>
  Desired Length: <input type='number' name='length' min=1 max=10 step=1 value=1 />
  <input type='button' value='Submit' />
  </form>
</div>
<div id='choc'></div>



<template>
  <img src='//media.bodyandfit.com/i/bodyandfit/chocolate-moment_Image_01?locale=en-gb,*&layer0=$PDP_003$&fmt=webp' />
</template>