為表單中的x輸入重復影像

我有這個代碼。我想在水平方向重復影像“chocci.png”（形式的長度）次數和垂直（形式的高度）次數。我嘗試了多種解決方案，但都失敗了，所以我在網上尋求幫助。

編輯

澄清一下：我不想使用影像作為頁面的背景，我只想在我的頁面中垂直和水平地顯示它一定次數（這取決于用戶在表單中輸入的內容）。到目前為止，這就是我嘗試做的事情：

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>

uj5u.com熱心網友回復：

第一個片段顯示了嘗試使用背景影像并使用百分比值縮放影像的版本。它不遵守 x 和 y 縮放，所以第二個片段更合適。我將源影像放置在模板中的螢屏外，并將其克隆到嵌套回圈中 - 為行和列嵌套。

顯示代碼片段

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>

標籤：javascript html css

上一篇：CSS繼承關鍵字“從規則中排除選定的元素”

下一篇：如何在輸入文本欄位旁邊對齊懸停文本？