I have a text element that is built when the user clicks a button. In the middle of that text, I added an input element.I want to make this process repeats seven times but it looks complicated. I actually made a lot of things but here are the important ones So, First I made an input element and a button when the user enter input and click the button what he wrote will be displayed in a h1 element with a random missing word Then,I made an input element in the that the missing word should’ve been in.What I want is that this to repeat this process seven times.
`function myFunction() {
var x = document.getElementById("input").value;
x=x+" ";
var y=document.getElementById("inputed");
var a,b='c';
let c,d=[];
var e;
var f=0;
const array =[];
const z=x.length;
for(let index=-1;index<7;index++){
a,b='c';
c.push(0);
d.push(0);
c[index]=0;
d[index]=0;
e=1;
f=0;
//Here the program will get a random space location and the space after it
while(a!=' ' ){
c[index]=Math.floor(Math.random()*x.length-2);
a=x.charAt(c[index]);
}
d[index]=c[index];
//The variable d will be the same as c and will increase until its value corrspends to a space
while(b!=' ' ){
d[index]++;
b=x.charAt(d[index]);
}
//I want the y.innerHTML to write from the 0 to c[0] then display the input element then from d[0] //to c[1] and display the input element again and form d[1] to c[2] until 7
y.innerHTML = `${x.slice(
0,
c[0]
)}<input type="text" style="color: gray;border:2px solid;border-radius: 10px;outline: none;
font-size: x-large;height:40px;width: 100px;" >${x.slice(
d[0],
z
)} `;
}
}``