Develop Reference

How do I make the second div have the same height as first div, irrespective of the screen-width?

I want my two divs to be of equal height regardless of the device used to view the page. To ensure this, I wrote the js function below:
window.onload = function() {
var left=document.getElementsByClassName('bg-text')[0].clientHeight;
var right=document.getElementsByClassName('para')[0].clientHeight;
if(left>right) {
document.getElementsByClassName('para')[0].style.height=left+"px";
}
else{
document.getElementsByClassName('bg-text')[0].style.height=right+"px";
}
};
The code above works for most cases, not all. As I keep on reducing the screen width from the console, the second div becomes larger than the first div. How do I fix this?
**EDIT: ** This is my html:
<div class="bg-text">
<h4><u>Newspaper particulars</u></h4><br>
<ul>
<li><label for="date">Select date :</label><br></li>
<input type="date" id="date" name="date" style="text-align: center; width: 100%;"><br><br>
<li><label for="news">Select newspaper :</label><br></li>
<select name="news" id="news" style="text-align: center; width: 100%;">
<option value="default">Click to select</option>
<option value="The Assam Tribune">The Assam Tribune</option>
<option value="The Times of India">The Times of India</option>
<option value="The Hindu">The Hindu</option>
<option value="Hindustan Times">Hindustan Times</option>
<option value="The Telegraph">The Telegraph</option>
</select><br><br>
<li><label for="paragraph_text" id="para">Subject description :</label><br></li>
<textarea name="paragraph_text" id="paragraph_text" rows="3" style="resize: none; box-sizing:border-box; width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box;"></textarea><br><br>
<span>Choose the required mode of input</span>
<li><div class="mb-3" style="width: 100%; border: 2px solid white; padding: 10px;">
<input type="radio" id="sel_scan" name="doc" value="scanning">
<button id="scan" onclick="startScan()" disabled>Scan document</button><br><br>
<div style="width: 100%;">
<input type="radio" id="myfile" name="doc" value="choosing">
<input type="file" id="Myfile" accept=".pdf,.jpg,.png" disabled>
</div>
</div></li>
</ul>
</div>
<div class="para">
<div class="container">
<span id="preview_text" style="text-align: center; vertical-align: middle; line-height: 400px; color: red;">Choose/Scan file to see preview here</span>
</div>
</div>
I want both the divs bg-text and para be of equal heights. Infact, as the second div is empty, so I want it to be the same height as that of the first div

You need to adjust the heights on resize as well. The code below should work:
function setHeight() {
var leftElement = document.getElementsByClassName('bg-text')[0];
var rightElement = document.getElementsByClassName('para')[0];
// Reset height
leftElement.style.height = "auto";
rightElement.style.height = "auto";
var leftHeight = leftElement.offsetHeight;
var rightHeight = rightElement.offsetHeight;
// Get max height and set it for both divs
var maxHeight = Math.max(leftHeight, rightHeight);
leftElement.style.height = maxHeight+"px";
rightElement.style.height = maxHeight+"px";
}
window.onload = function() {
setHeight();
};
window.onresize = function() {
setHeight();
}

JAVASCRIPT , HTML enabling input field based on radio button choice

I tried to have two input option enable based on the radio button choice, but only one option is enabling not matter which option I choose. Eg- If I choose sheetcake, instead of having input option for sheetcake, I have the input option of roundcake. I am new in javascript and any advice will be much appreciated. Thank You. ( I tried to run the code in snippet and it works fine but I run the same code in browser and only one input box is working no matter what, I tried to run in 3 different browsers and got the same error, I don't know what is the issue and where I made a mistake. Thank You in advance.
const sheetcake = document.getElementById("sheetcake");
const roundcake = document.getElementById("roundcake");
var caketype = document.getElementsById("caketype");
function CakeChoice(choice){
if (choice == sheetcake){
document.getElementById("SheetLength").disabled=false;
document.getElementById("SheetWidth").disabled=false;
document.getElementById("RoundRadius").disabled=true;
}
else {
document.getElementById("SheetLength").disabled=true;
document.getElementById("SheetWidth").disabled=true;
document.getElementById("RoundRadius").disabled=false;
}
}
<div id="caketype">
<label class="caketype required">Cake Type:</label> <br>
<input type="radio" id="sheetcake" name="caketype" value="0" required onclick="CakeChoice(sheetcake)">
<label>Sheet Cake</label><br>
<input type="radio" id="roundcake" name="caketype" value="0" required onclick="CakeChoice(roundcake)">
<label>Round Cake</label>
</div>
<br>
<div id="CakeDimensions" >
<label>Cake size (cm)</label><br>
<input type="number" id="SheetLength" value="0" min="30" max="60" required disabled>
<label class="form-label required">cm Length</label><br>
<input type="number" id="SheetWidth" value="0" min="30" max="45" required disabled>
<label class="form-label required">cm Width</label>
</div>
<br>
<div id="round">
<label>Cake size</label><br>
<input type="number" id="RoundRadius" min="15" max="30" disabled required>
<label class="form-label required">cm Radius</label>
</div>
<br><br>
<div id="cakelayers">
<label class="form-label required">How many layers?</label><br>
<input type="radio" id="OneLayer" name="CakeLayers" value="1layer" required>
<label for="OneLayer">One Layer</label><br>
<input type="radio" id="TwoLayers" name="CakeLayers" value="2layers" required>
<label for="TwoLayers">Two Layers</label><br>
<input type="radio" id="ThreeLayers" name="CakeLayers" value="3layers" required>
<label for="ThreeLayers">Three Layers</label>
</div>
<br><br>

May I suggest a slightly alternative approach which avoids having irrelevant disabled options that some users might be trying to activate.
Instead of disabling the irrelevant options, manipulating the display styles of the two sets of option for cake dimensions (by javascript) allows for only the relevant one to be available for interaction. This lets you make the relevant size option only appear when a type has been chosen (and toggles between them if the user changes their mind).
As you have fairly complex markup for each option, I've added extra divisions containing each group. The ids for the relevant divisions, rectangle and round are used to create references to each grouping in the javascript allowing access to their style.display property, which can be toggled.
const sheetcake = document.getElementById("rectangle");
const roundcake = document.getElementById("round");
sheetcake.style = "display: none";
round.style = "display: none";
function CakeChoice(choice){
if (choice == 'sheetcake'){
sheetcake.style = "display: block";
roundcake.style = "display: none";
} else {
sheetcake.style = "display: none";
roundcake.style = "display: block";
}
}
<div id="caketype">
<label class="caketype required">Cake Type:</label> <br>
<input type="radio" id="sheetcake" name="caketype" value="0" required onclick="CakeChoice('sheetcake')">
<label>Sheet Cake</label><br>
<input type="radio" id="roundcake" name="caketype" value="0" required onclick="CakeChoice('roundcake')">
<label>Round Cake</label>
</div>
<br>
<div id="CakeDimensions" >
<div id="rectangle">
<label>Cake size (cm)</label><br>
<input type="number" id="SheetLength" value="0" min="30" max="60" required>
<label class="form-label required">cm Length</label><br>
<input type="number" id="SheetWidth" value="0" min="30" max="45" required>
<label class="form-label required">cm Width</label>
</div>
<div id="round">
<label>Cake size</label><br>
<input type="number" id="RoundRadius" min="15" max="30" required>
<label class="form-label" "required">cm Radius</label>
</div>
</div>
<br>
<div id="cakelayers">
<label class="form-label required">How many layers?</label><br>
<input type="radio" id="OneLayer" name="CakeLayers" value="1layer" required>
<label for="OneLayer">One Layer</label><br>
<input type="radio" id="TwoLayers" name="CakeLayers" value="2layers" required>
<label for="TwoLayers">Two Layers</label><br>
<input type="radio" id="ThreeLayers" name="CakeLayers" value="3layers" required>
<label for="ThreeLayers">Three Layers</label>
</div>
<br>

I've made some minor refactoring to your HTML then removed a bit of replication to your javascript, reducing the dependencies on Ids. This will make it more flexible should you add more options for dimensions or round. I've also illustrated adding the event listeners via javascript.
//Get all the radio buttons in the element with ID caketype and itterate them
document.querySelectorAll("#caketype input[type=radio]").forEach(function(item) {
//Add an on click event listener
item.addEventListener("click", function() {
//Is Sheet cake chosen from the clicked element
let isSheetCake = this.value === "sheetcake";
//Set out disabled AND required attributes based on the above
//Get the input elements in the fieldset and itterate instead of being bound by id
document.querySelectorAll("#CakeDimensions input").forEach(function(element) {
element.disabled = !isSheetCake;
element.required = isSheetCake;
});
//Do the same for round, but invert the logic
document.querySelectorAll("#round input").forEach(function(element) {
element.disabled = isSheetCake;
element.required = !isSheetCake;
});
//Bonus: lets set a class to indicate that group is disabled
//.classList.toggle() ,adds or removes a class, in this case
// based on a truthy value
document.getElementById("CakeDimensions").classList.toggle("disabled", !isSheetCake);
document.getElementById("round").classList.toggle("disabled", isSheetCake);
});
});
fieldset {
border: none;
padding: 0.5em;
margin: 0;
}
.disabled {
color: #EEE;
}
<!-- Ive Given the radio buttond values, which you are going to want if you send this to a server-->
<!-- Also encapsulated the radio button group with a fieldset which is more semantic-->
<!-- Inline Javascript has been removed -->
<!-- Labels have been associated with their form elements with the "for" attribute-->
<fieldset id="caketype">
<label class="caketype required">Cake Type:</label> <br>
<input type="radio" id="sheetcake" name="caketype" value="sheetcake" required>
<label for="sheetcake">Sheet Cake</label><br>
<input type="radio" id="roundcake" name="caketype" value="roundcake" required>
<label for="roundcake">Round Cake</label>
</fieldset>
<fieldset id="CakeDimensions">
<label>Cake size (cm)</label><br>
<input type="number" id="SheetLength" value="0" min="30" max="60" required disabled>
<label class="form-label required">cm Length</label><br>
<input type="number" id="SheetWidth" value="0" min="30" max="45" required disabled>
<label class="form-label required">cm Width</label>
</fieldset>
<fieldset id="round">
<label>Cake size</label><br>
<input type="number" id="RoundRadius" min="15" max="30" disabled required>
<label class="form-label required">cm Radius</label>
</fieldset>

Between Jon P's and Dave Pritlove's answers it looks like the basics are already covered. Tihs answer will focus on the following:
Event delegation: A programming paradigm in which event bubbling is used to leverage control of an unlimited number of elements by binding an ancestor element to listen for events and delegate which elements react to events and which elements are excluded.
HTMLFormElement interface: Part of the The HTML DOM API, that has terse syntax and unique features:
Referencing a form:
<form id="UI"></form>
const UI = document.forms.UI
/*or*/
const UI = document.forms[0] // the first of one or more forms.
Referencing all form controls✻ within UI with the .elements property:
<input id='i1' name='IO'> <button name='btn'></button> <input id='i2' name='IO'>
const fC = UI.elements;
// Reference by #id
const I1 = fC.i1 // first input by #id
// Refernce by [name]
const B = fC.btn // button by [name]
// HTMLFormsControlCollection of all tags with [name='IO']
const io = fC.IO // an array-like object of both inputs
const ioArray = [...io] // convert into an array
[for] attribute & .labels property association: Besides the [for] attribute & form control #id association, there's another type of association we can establish:
<label for='A'></label><input id='A'><label for='A'>I'm the 2nd label</label>
const IO = UI.elements; // collect all of #UI form controls
const a = IO.A; // reference the input
const Alabels = a.labels; // collect all label associated to input via [for] to #id
Alabels[1].textContent; // get the text of the 2nd label
// result: "I'm the 2nd label"
Here's a list of other properties used in the example below:
.checkValidity()
Event.target
.classList
The example has a step progression:
Pick a type
Pick a size
Choose how many layers
Step 2 is disabled until step 1 is completed.
Step 3 is disabled until the user enters valid data in step 2.
✻form controls: <button>, <fieldset>, <input>, <object>, <output>, <select>, <textarea>
const form = document.forms.cake;
form.onchange = cakeStep1;
form.addEventListener('input', cakeStep2);
function cakeStep1(e) {
const IO = this.elements;
const picked = e.target;
const radios = [...IO.type];
const l = IO.L;
const w = IO.W;
const d = IO.D;
const sSet = IO.sizeSet;
if (picked.name == 'type') {
radios.forEach(r => r.labels[0].classList.remove('active'));
picked.labels[0].classList.add('active')
sSet.disabled = false;
if (picked.id == 'sheet') {
d.disabled = true;
d.labels[0].classList.add('disabled');
l.disabled = false;
l.labels[0].classList.remove('disabled');
w.disabled = false;
w.labels[0].classList.remove('disabled');
} else {
d.disabled = false;
d.labels[0].classList.remove('disabled');
l.disabled = true;
l.labels[0].classList.add('disabled');
w.disabled = true;
w.labels[0].classList.add('disabled');
}
}
}
function cakeStep2(e) {
const IO = this.elements;
const origin = e.target;
const l = IO.L;
const w = IO.W;
const d = IO.D;
const lSet = IO.layerSet;
if (origin.name == 'size') {
if (IO.sheet.checked && l.checkValidity() == true && w.checkValidity() == true) {
lSet.disabled = false;
} else if (IO.round.checked && d.checkValidity() == true) {
lSet.disabled = false;
} else {
lSet.disabled = true;
}
}
}
html {
font: 2ch/1.2 'Segoe UI'
}
header {
margin-bottom: -12px;
padding: 0;
}
label {
display: block;
width: 18ch;
margin-bottom: 4px;
}
[type='radio'] {
display: inline-block;
vertical-align: baseline;
height: 1.5ex;
margin: 0;
}
[type='number'] {
display: :inline-block;
width: 10ch;
float: right;
text-align: center
}
.active {
font-weight: 900;
text-decoration: underline;
}
.disabled {
opacity: 0.4
}
<form id='cake'>
<header>
<h2>Cake Order</h2>
</header>
<fieldset name="typeSet">
<legend>Type</legend>
<label for='sheet'><input id="sheet" name="type" type="radio" value="sheet"> Sheet Cake</label>
<label for='round'><input id="round" name="type" value="round" type="radio"> Round Cake</label>
</fieldset>
<fieldset name="sizeSet" disabled>
<legend>Size (cm)</legend>
<label for='L' class='disabled'>Length: <input id="L" name='size' type="number" min="30" max="60" placeholder='30-60cm' required></label>
<label for='W' class='disabled'>Width: <input id="W" name='size' type="number" min="30" max="45" placeholder='30-45cm' required></label>
<label for='D' class='disabled'>Diameter: <input id="D" name='size' type="number" min="15" max="40" placeholder='15-40cm' required></label>
</fieldset>
<fieldset name="layerSet" disabled>
<legend>Layers</legend>
<select id='layers' name='layers'>
<option selected>Number of Layers</option>
<option value='1'>1 Layer</option>
<option value='2'>2 Layers</option>
<option value='3'>3 Layers</option>
</select>
</fieldset>
</form>

On button click get values of many input fields with the same class and paste it inside different input fields with the same class using javascript

Based on a previous question of mine here i have three input fields with the same css class price-input and i want after clicking on the button with the id set-price-btn to fill them with the input value displayed at the bottom of each input field using pure JavaScript.
The problem is that everytime i click the button, the variable videosize returns undefined. What I am doing wrong ?
var setpricebtn = document.getElementById("set-price-btn");
setpricebtn.addEventListener("click", () => {
var priceinputs = document.querySelectorAll("price-input");
var videosize = document.querySelectorAll("video-file-size").value;
for (var i = 0; i < videosize.value; i++) {
var savedprice = videosize[i].value;
priceinputs[i].value = savedprice;
}
});
.toolbar {
width:100%;
overflow:hidden;
margin-bottom:30px;
}
.btn {
width:auto;
display:inline-block;
padding:10px;
text-align:center;
background:#e8e8e8;
cursor:pointer;
border-radius:4px;
font-weight:bold;
font-size:12px;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="toolbar">
<div class="btn btn-primary" id="set-price-btn"> Set price to all fields </div>
</div>
<div class="row">
<div class="col-3 item">
<input name="price" placeholder="Enter price" class="price-input" value="" min="0" type="number">
<input name="uf" class="video-file-size" value="155" type="text">
</div>
<div class="col-3 item">
<input name="price" placeholder="Enter price" class="price-input" value="" min="0" type="number">
<input name="uf" class="video-file-size" value="185" type="text">
</div>
<div class="col-3 item">
<input name="price" placeholder="Enter price" class="price-input" value="" min="0" type="number">
<input name="uf" class="video-file-size" value="314" type="text">
</div>
</div>

Few things to remember:
This is how you query based on classes when using querySelector. You have to use a ..
videosize will be a live collection of HTML Nodes.
var priceinputs = document.querySelectorAll(".price-input");
var videosize = document.querySelectorAll(".video-file-size");
for (var i = 0; i < videosize.length; i++) {
var savedprice = videosize[i].value;
priceinputs[i].value = savedprice;
}
});

You cannot do var videosize = document.querySelectorAll("video-file-size").value because document.querySelectorAll("video-file-size") returns a NodeList. See docs.
And either you use document.querySelectorAll(".video-file-size") or document.getElementsByClassName('video-file-size').

One HTML form text box doesn't show keyboard input in Firefox

I have a form in my HTML that takes in first name, last name, and phone number to create an account ID. The input textboxes for first name, last name, and account ID accept keyboard input and display it, as would be expected. However, when I'm viewing the page on the Firefox browser, only the phone number textbox doesn't work. I can click into the box once and see the cursor, but as soon as I start typing, no text shows up, and the cursor disappears. However, based on the Javascript creating an account ID with the last four digits of the phone number typed, I know the input is recognized. It works in other browsers, just not in Firefox.
<article>
<h2>New Account Information</h2>
<form>
<fieldset id="deliveryinfo">
<label for="fnameinputacct">First Name</label>
<input type="text" id="fnameinputacct" name="fname" />
<label for="lnameinputacct">Last Name</label>
<input type="text" id="lnameinputacct" name="lname" />
<label for="phoneinputacct">Phone Number</label>
<input type="text" id="phoneinputacct" name="phone" />
<label for="accountidbox">Account ID</label>
<input type="text" id="accountidbox" name="accountid" />
</fieldset>
<fieldset id="submitbutton">
<input type="submit" id="submitBtn" value="Create Account" />
</fieldset>
</form>
</article>
Here is the CSS
fieldset {
margin-bottom: 10px;
position: relative;
padding: 2.5em 1em 0.5em 1em;
background: #e3d5ba;
}
#deliveryinfo label {
display: block;
float: left;
clear: left;
margin-top: 5px;
}
#deliveryinfo input {
display: block;
margin-left: 130px;
}
#fnameinputacct, #lnameinputacct, #phoneinputacct, #accountidbox {
width: 12em;
}
#submitBtn {
font-size: 1.25em;
}
And some Javascript that goes with the fields. This method is added in another function.
function createID() {
var fname = document.getElementById("fnameinputacct");
var lname = document.getElementById("lnameinputacct");
var phone = document.getElementById("phoneinputacct");
var account = document.getElementById("accountidbox");
var fields = document.getElementsByTagName("input");
var acctid;
var fistInit;
var lastInit;
if (fname != "" && lname != "" && phone != "") {
fistInit = fname.value.charAt(0).toUpperCase();
lastInit = lname.value.charAt(0).toUpperCase();
acctid = fistInit + lastInit + phone.value.substring(phone.value.length - 4);
account.value = acctid;
newAccountArray = [];
for (var i = 0; i < fields.length - 1; i++) {
newAccountArray.push(fields[i].value);
}
}
}

You might try breaking up your form field groups with a <div> or <p>.
See https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form
Some of the widely used css frameworks do this as well. Look at Semantic UI, Bootstrap, or Material. These do a similar grouping with div containers for each label/input
Example from semantic ui form:
<form class="ui form">
<div class="field">
<label>First Name</label>
<input type="text" name="first-name" placeholder="First Name">
</div>
<div class="field">
<label>Last Name</label>
<input type="text" name="last-name" placeholder="Last Name">
</div>
<div class="field">
<div class="ui checkbox">
<input type="checkbox" tabindex="0" class="hidden">
<label>I agree to the Terms and Conditions</label>
</div>
</div>
<button class="ui button" type="submit">Submit</button>
</form>

dynamically add and removing div with javascript

presently stuck in situation. trying to create a form where one can dynamically add and remove div elements where necessary,so far have been a to DYNAMICALLY ADD, problem is if i try to REMOVE div,only the last created gets to delete whilst others remain(excluding the parent div)KINDLY ASSIST.
<!doctype html>
<html lang="en">
<head>
</head>
<body>
<div id="box">
<div id='div' style="background: #99CCFF; height: 100px; width:300px" >
<p>Degree Level: <select id="dropdown">
<option value="Doctorate Degree">Doctorate Degree</option>
<option value="Masters">Masters</option>
<option value="Bachelors Degree">Bachelors Degree</option>
<option value="SSCE">SSCE</option>
</select></p>
<label for="firstname">School Name</label>
<input type="text" placeholder="Your Role"">
<label for="from">From</label>
<input type="text" id="from" name="from">
<br>
<label for="to">to</label>
<input type="text" id="to" name="to">
</div>
</div>
<div>
<button id="submit1">Add new div</button>
<input type="button" value="Remove Element"
onClick="removeElement('box','div');">
</div>
</body>
<script>
var box = document.getElementById('box'),
template = box.getElementsByTagName('div'),
template = template[0];
var counter = 1;
submit1.onclick = function () {
var new_field = template.cloneNode(true);
new_field.id = new_field.id + counter++
console.log(new_field.id)
box.appendChild(new_field);
return false;
};
</script>
<script>
function removeElement(boxDiv, divDiv){
if (divDiv == boxDiv) {
alert("The parent div cannot be removed.");
}
else if (document.getElementById(divDiv)) {
var div = document.getElementById(divDiv);
var box = document.getElementById(boxDiv);
box.removeChild(div);
}
else {
alert("Child div has already been removed or does not exist.");
return false;
}
}

You are passing the string div to your remove element function which will only remove the first div.
You can find all the children elements and then remove the last child
Building on your previous code, see the snippet below
var box = document.getElementById('box'),
template = box.getElementsByTagName('div'),
template = template[0];
console.log(template);
var counter = 1;
submit1=document.getElementById("submit1");
submit1.onclick = function () {
var new_field = template.cloneNode(true);
new_field.id = new_field.id + counter++
console.log(new_field.id)
box.appendChild(new_field);
return false;
};
function removeElement(boxDiv){
var box = document.getElementById(boxDiv);
if(box.children){
console.log(box.children);
box.children[box.children.length-1].outerHTML="";
}
}
<div id="box">
<div id='div' style="background: #99CCFF; height: 100px; width:300px" >
<p>Degree Level: <select id="dropdown">
<option value="Doctorate Degree">Doctorate Degree</option>
<option value="Masters">Masters</option>
<option value="Bachelors Degree">Bachelors Degree</option>
<option value="SSCE">SSCE</option>
</select></p>
<label for="firstname">School Name</label>
<input type="text" placeholder="Your Role"">
<label for="from">From</label>
<input type="text" id="from" name="from">
<br>
<label for="to">to</label>
<input type="text" id="to" name="to">
</div>
</div>
<div>
<button id="submit1">Add new div</button>
<input type="button" value="Remove Element"
onClick="removeElement('box');">
</div>

It might be because js thinks you're only selecting the last one when doing
var div = document.getElementById(divDiv);
Try doing a loop until document.getElementById(divDiv) is undefined