I Have a form that includes a label, slider and an output.
Different sizes of labels can mess the vertical organization of the slider (like in the link below).
dist
This is my code:
function slider(name,item){
var label=document.createElement("label");
label.innerHTML = name+" rate for "+item;
var form=document.createElement("form");
form.name="registrationForm";
form.className ="mainForm";
var input = document.createElement("input");
input.type="range";
input.name="ageInputName";
input.id="input"+name+item;
input.value="50";
input.min="0";
var output = document.createElement("output");
output.name="ageOutputName";
output.id="output"+name+item;
input.oninput=()=>updateTextInput(input.id,output.id);
form.appendChild(label);
form.appendChild(input);
form.appendChild(output);
output.value="50";
document.getElementById("container").appendChild(form);
}
How can I fix this?
You can use css classes with attributes width and display:inline-block to achieve what you are looking for. Example
In your javascript you can use input.classList.add('input');
HTML
.label {
width:150px;
background:#f7f7f7;
display:inline-block;
text-align:center;
}
.input {
width:200px;
display:inline-block;
}
.output {
width:50px;
background:#d7d7d7;
display:inline-block;
}
-- if it has to be done in js you can always add styles in js to your elements
JS
slider('first', 'bag');
slider('second', 'box');
slider('third', 'floor');
function slider(name, item) {
var label = document.createElement("label");
label.innerHTML = name + " rate for " + item;
label.classList.add("label");
var form = document.createElement("form");
form.name = "registrationForm";
form.className = "mainForm";
var input = document.createElement("input");
input.type = "range";
input.name = "ageInputName";
input.id = "input" + name + item;
input.value = "50";
input.min = "0";
input.classList.add('input');
var output = document.createElement("output");
output.name = "ageOutputName";
output.id = "output" + name + item;
output.classList.add('output');
input.oninput = () => updateTextInput(input.id, output.id);
form.appendChild(label);
form.appendChild(input);
form.appendChild(output);
output.value = "50";
document.getElementById("container").appendChild(form);
}
For a slightly more advanced method you could learn about css grid and flexbox.
Related
I'm working on a table content with JS. What I can update with a button or clear data from the table.
Phone Number: phoneNumber.value
Bay Number: bayNumber.Value (it's not added yet, but will work same)
The First column in the table is always the same (Phone Number and Bay Number), but the second column should change what is in the input after I press the save button (it works fine) Just if I press the delete, it deletes the all table.
I think the problem is how I created the table, but don't know how should I fix it.
//FORM//
var form = document.createElement('div');
form.style.width = "500px";
form.style.height = "500px";
form.style.margin = "auto";
form.style.textAlign = "center";
form.style.paddingTop = "20px";
form.style.background = "grey";
form.classList.add("printVisible");
document.body.appendChild(form);
var phoneNumber = document.createElement("INPUT");
phoneNumber.setAttribute("type", "text");
phoneNumber.value = "07";
phoneNumber.classList.add("hiddenPrint");
form.appendChild(phoneNumber);
var bayNumber = document.createElement("INPUT");
bayNumber.setAttribute("type", "text");
bayNumber.value = "Bay Number";
bayNumber.classList.add("hiddenPrint");
form.appendChild(bayNumber);
var buttonSave = document.createElement("BUTTON");
buttonSave.addEventListener("click", saveDatas);
var buttonSaveT = document.createTextNode("Save");
buttonSave.appendChild(buttonSaveT);
form.appendChild(buttonSave);
var buttonClear = document.createElement("BUTTON");
buttonClear.addEventListener("click", clearDatas);
var buttonClearT = document.createTextNode("Clear");
buttonClear.appendChild(buttonClearT);
form.appendChild(buttonClear);
var phoneNumberT = document.createElement("P");
form.appendChild(phoneNumberT);
var bayNumberT = document.createElement("P");
form.appendChild(bayNumberT);
//SAVE BUTTON//
function saveDatas() {
tablePhoneNumberTx.textContent = phoneNumber.value;
bayNumberT.textContent = bayNumber.value;
}
//CLEAR BUTTON//
function clearDatas() {
tablePhoneNumberTx.textContent = "";
bayNumberT.textContent = "";
}
//TABLE//
let body = document.body;
let tbl = document.createElement("table");
tbl.style.textAlign = "center";
tbl.style.margin = "auto";
let tablePhoneNumberTx = tbl.insertRow();
let tablePhoneNumber = tablePhoneNumberTx.insertCell();
tablePhoneNumber.appendChild(document.createTextNode(`Phone Number`));
tablePhoneNumberTx.appendChild(document.createTextNode(phoneNumber.value));
tablePhoneNumber.style.border = "1px solid black";
tablePhoneNumber.style.width = "250px";
tablePhoneNumberTx.style.border = "1px solid black";
tablePhoneNumberTx.style.background = "250px";
form.appendChild(tbl);
P.S. Its a TamperMonkey Script so, must be everything in JS
some sort of code factorization you could use, but since you wrote "only JS" I wonder why you are referencing CSS classes?
const newEl = ( tag, styling={}, attrbs={} ) =>
{
let elm = document.createElement(tag)
for(let key in styling) elm.style[key] = styling[key]
for(let key in attrbs) elm[key] = attrbs[key]
return elm
};
let myDiv = document.body
.appendChild
( newEl('div'
, {width:'200px', margin:'auto'}
, {className:'toto', textContent:'hello world'}
) );
console.log( myDiv )
How to add a for="" and required='' attribute to an element with JavaScript like this: <label for='text'>Something</label> and require to input<input type="text" required>?
function newFields(){
var number = document.getElementById("link").value;
var container = document.getElementById("new");
while (container.hasChildNodes()) {
container.removeChild(container.lastChild);
}
for (i=0;i<number;i++){
var label = document.createElement("label");
var input = document.createElement("input");
label.for = "text";
label.textContent = "Field " + (i + 1);
input.type = "text";
input.required = true;
container.appendChild(label);
}
}
You can either set the for attribute or set the htmlFor property:
label.setAttribute('for', 'text');
label.htmlFor = 'text';
See the MDN description of the label element.
I have a function which dynamically adds div, what i need is a button inside, which deletes this div. Eg: on click of a button, a div is added, with a button inside. On click of that button, the div is removed. Here's my code for addition of divs:
function newTextQuestion() {
var div = document.createElement('div');
div.style.borderLeft = "3px solid #00897b";
div.style.marginBottom = "20px";
div.style.paddingLeft = "10px";
div.style.backgroundColor = "white";
div.className = 'q';
div.setAttribute('data-type', '0');
var name = "random-" + parseInt(Math.random() * 1000000000);
div.innerHTML = '<h5>Tekstiküsimus:</h5><input class="text" name="' + name + '" type="text" placeholder="Küsimuse tekst..." oninvalid="this.setCustomValidity(\'\See väli on kohustuslik!\'\)" oninput="setCustomValidity(\'\'\)" required>';
document.getElementById('questionnaireDiv').appendChild(div);
}
--- EDIT ---
What i've tried so far:
function newTextQuestion() {
var div = document.createElement('div');
div.style.borderLeft = "3px solid #00897b";
div.style.marginBottom = "20px";
div.style.paddingLeft = "10px";
div.style.backgroundColor = "white";
var delbutton = document.createElement('button');
var delbuttontext = document.createElement('X');
delbutton.appendChild(delbuttontext);
delbutton.setAttribute("onclick", function() { $(this).parent().remove(); });
div.appendChild(delbutton);
div.className = 'q';
div.setAttribute('data-type', '0');
var name = "random-" + parseInt(Math.random() * 1000000000);
div.innerHTML = '<h5>Tekstiküsimus:</h5><input class="text" name="' + name + '" type="text" placeholder="Küsimuse tekst..." oninvalid="this.setCustomValidity(\'\See väli on kohustuslik!\'\)" oninput="setCustomValidity(\'\'\)" required>';
document.getElementById('questionnaireDiv').appendChild(div);
}
When you need event handling capabilities, don't create an element via .innerHTML, use the document.createElement() technique. To create the button, just follow the same technique that you had already started.
Also, it's best to work with CSS classes when you can instead of setting individual properties.
var parent = document.getElementById('questionnaireDiv');
function newTextQuestion() {
var div = document.createElement('div');
div.classList.add("newDiv");
div.classList.add("q");
div.setAttribute('data-type', '0');
var name = "random-" + parseInt(Math.random() * 1000000000);
var h5 = document.createElement("h5");
var input = document.createElement("input");
input.type = "text";
input.classList.add("text");
input.placeholder = "Küsimuse tekst...";
input.required = true;
input.addEventListener("invalid", function(){
this.setCustomValidity("\'See väli on kohustuslik!\'");
});
input.addEventListener("input", function(){
this.setCustomValidity("");
});
var btn = document.createElement("button");
btn.textContent = "Delete";
div.appendChild(h5);
div.appendChild(input);
div.appendChild(btn);
btn.addEventListener("click", function(){
parent.removeChild(div);
});
parent.appendChild(div);
}
newTextQuestion();
.newDiv {
border-left: 3px solid #00897b;
margin-bottom: 20px;
padding-left: 10px;
background-color:"white";
}
<div id="questionnaireDiv"></div>
I cannot figure out how to display vertically the radio-buttons with labels I have created dynamically with javascript. My radio-buttons appear in-line. Here is my code...
CSS / display: list-item; does not work...
Thanks for you help !
<script type = "text/javascript">
var form = document.createElement("myForm");
for (i=0; i<myArray.length; i++) {
x=myArray[i];
addradiobutton("radio",x,"myForm");
}
function addradiobutton(type,text,formName) {
var label = document.createElement("label");
var element = document.createElement("input");
element.setAttribute("type", type);
element.setAttribute("value", text);
element.setAttribute("name", formName);
label.appendChild(element);
label.innerHTML += text;
var foo = document.getElementById(formName);
foo.appendChild(label);
}
</script>
function addradiobutton() {
var result=""
for(i=0;i<3;i++){
result+="<label>" + i + "</label><input type='radio' name='radio'>";
}
$('form').append(result);
}
I am trying to add an <input> element using Javascript. However, the innerHTML is not showing up. Below is my code:
function addElements()
{
container = document.getElementById("duration"); //a div container
var input1 = document.createElement("input");
var input2 = document.createElement("input");
input1.type = "number";
input1.min = "0";
input1.max = "10";
input1.required = true;
input1.innerHTML = "years";
input2.type = "number";
input2.min = "0";
input2.max = "12";
input2.required = true;
input2.innerHTML = "months";
container.appendChild(input1);
container.appendChild(input2);
}
The result of this code only produces two number input fields without the innerHTML. Is there anything wrong with my code?
Input elements don't have inner content you can set with innerHTML. Instead set value property:
input1.value = "years";
However, it seems that in your case you want to set placeholder:
input1.setAttribute("placeholder", "years");
or you can set corresponding property as well:
input1.placeholder = "years";
I think what you try to achieve is [label][input] in this case you have to add 2 new more elements on page.
function addElements()
{
container = document.getElementById("duration"); //a div container
var label1 = document.createElement("label");
var input1 = document.createElement("input");
var label2 = document.createElement("label");
var input2 = document.createElement("input");
input1.type = "number";
input1.min = "0";
input1.max = "10";
input1.required = true;
label1.innerHTML = "years";
input2.type = "number";
input2.min = "0";
input2.max = "12";
input2.required = true;
label2.innerHTML = "months";
container.appendChild(label1);
container.appendChild(input1);
container.appendChild(label2);
container.appendChild(input2);
}
addElements();
<div id="duration" />