<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/> <form> num: <input type="number" name="a" id="num"><br> <button onclick="addnewrow()">Add</button> </form> function addnewrow(num) { var num = document.getElementById('num').value var count = 1 for (i = 0; i <=num; i++) { var newrow = '<div class="row">' + '<div class="col-md-4">' + '<div class="form-group label-floating">' + '<label class="control-label">Title + count</label>' + '<input type="text" class="form-control" v-model="act" >' + '</div>' + '</div>' + '</div>'; count++: return newrow; } }Se supone que este código html debe tomar un número de entrada en el primer formulario y generar ese número de filas del formulario, sin embargo, esto no funciona, ¿cómo se puede modificar para que funcione?
document.querySelector("#add") .click en él.e.preventDefault() para detener el comportamiento predeterminado del formulario para enviar.for-loop .main seleccionado usando innerHTML . const main = document.querySelector("#main"); const addButton = document.querySelector("#add"); addButton.addEventListener("click", (e) => { e.preventDefault(); var num = parseInt(document.getElementById('num').value); for (i = 1; i <= num; i++) { main.innerHTML += `<div class="row"><div class="col-md-4"><div class="form-group label-floating"><label class="control-label">Title + count</label><input type="text" class="form-control" v-model="act"></div></div></div>` } }); '<div class="row">'+'<div class="col-md-4">'+'<div class="form-group label-floating">'+'<label class="control-label">Title + count</label>'+'<input type="text" class="form-control" v-model="act" >'+'</div>'+'</div>'+'</div>'; <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form> num: <input type="number" name="a" id="num"><br> <button id="add">Add</button> <div id="main"></div> </form>