Develop Reference

How to correctly add CSS to input element through JavaScript

I have an input field with the class 'device_1' which has a css style applied to it. The function 'createNewInputField()'created new input field with the class 'device_2'. Every new field creation creates a new class name. I want to apply the same CSS style applied to 'device_1' to the newly created fields ('device_2', ... , 'device_X'). I have a function 'addStyle()' that is supposed to do exactly this but it does not actually apply the style.
var idNumber= 1;
var deviceID = "device_"+idNumber;
var kWattID = "kW_"+idNumber;
var hoursID = "hours_"+idNumber;
var totalID = "total_"+idNumber;
function createNewInputFields() {
idNumber = idNumber+1;
deviceID = "device_"+idNumber;
const containerDevice = document.getElementById('deviceCol');
const inputHtmlDevice = "<br><input type='text' id='"+deviceID+"' required>";
containerDevice.insertAdjacentHTML('beforeend', inputHtmlDevice);
containerDevice.style(addStyle(containerDevice, idNumber));
return idNumber;
}
function addStyle(container, number){
var styles = `
#device_`+number+`{
text-align: center;
border-radius: 10px;
border:solid #2b2b2b;
border-width: 2px;
}
`
return styles
}
#device_1{
text-align: center;
border-radius: 10px;
border:solid #2b2b2b;
border-width: 2px;
}
<div class="calculationSection">
<h1 class="energytitle">Energy calculations</h1>
<div class="row_2">
<div class="deviceCol" id="deviceCol">
<p><b>Device</b></p>
<input type="text" id="device_1" required>
</div>
<div class="addButton">
<button class="btn" onclick="createNewInputFields()"> Add device </button>
</div>
</div>

The error says it loud and clear containerDevice.style is not a function. To add styles, you need to add them one at a time as properties, like
containerDevice.style.backgroundColor = '#000'
but it's far more efficient and better practice to create actual styles in your css for this and just add or remove them
css:
.elementcss {
text-align: center;
border-radius: 10px;
border:solid #2b2b2b;
border-width: 2px;
}
javscript:
document.querySelector('.element').classList.add('elementcss')
document.querySelector('.element').classList.remove('elementcss')

How to put white space after a letter while typing with JavaScript?

I want to put empty spaces after a letter while typing.
We can make it with css letter-spacing property but when we copy this text, i does not keep white spaces.
How can we make it with vanilla javascript?
Added letter-spacing to my css to show what i want exaclty.
JSFIDDLE
var my_text = document.getElementById("my_text");
var output_text = document.getElementById("output_text");
my_text.addEventListener("keyup", function() {
var val = this.value;
output_text.innerHTML = val;
});
#output_text {
width: 300px;
height: 200px;
border: 1px solid #ccc;
letter-spacing: 10px;
}
<textarea id="my_text" cols="30" rows="10"></textarea>
<div id="output_text"></div>

Split all the characters and join with a white space: https://jsfiddle.net/wkw72u7e/4/.
var my_text = document.getElementById("my_text");
var output_text = document.getElementById("output_text");
my_text.addEventListener("keyup", function() {
output_text.innerHTML = this.value.split('').join(' ');
});
#output_text {
width: 300px;
height: 200px;
border: 1px solid #ccc;
}

And why vanilla javascript? Ordinary javascript can do it:
var my_text = document.getElementById("my_text");
var output_text = document.getElementById("output_text");
my_text.addEventListener("keypress", function(event) {
event.preventDefault();
output_text.innerHTML += " " + String.fromCharCode(event.keyCode);
});
#output_text {
width: 300px;
height: 200px;
border: 1px solid #ccc;
}
<textarea id="my_text" cols="30" rows="10"></textarea>
<div id="output_text"></div>

How can I have text resize based on the width of the preceding div element using CSS?

I have a label I'm attempting to generate. It has the following structure.
.name-box { width: 400px; background-color: #efefef; border: 1px solid #000; overflow: hidden; white-space: nowrap; }
.last-name { font-size: 26px; display:inline; overflow: hidden;}
.first-name { display:inline; overflow: hidden;}
<div class="name-box">
<div class="last-name">McDonald-OrAReallySuperDuperLongLastName</div>
<div class="first-name">David</div>
</div>
What I'm wanting to do is change the text size of the first name, based on the length of the last name. If the name is "Venckus-Stringfellow" and I only have a little bit of space left I'd like the text size of the first name to be around 7px. But if the last name is "Le", then I'd want the first name to have a text size of 26px -- granted that having a text size of 26px still allows the first name to fit on the 600px that my div has to fill the label. How can I do this with HTML/CSS (if I MUST use Javascript then that's fine, was trying to avoid it though) ?

Javascript that uses the length of the last name in a mathematical equation to set the first names size. This is a very simple example and you'd need to change it if you wanted it to be exponential and you should probably set high and low bounds that it can't go below.
var lastNameText = document.querySelector('.last-name').textContent;
var firstName = document.querySelector('.first-name');
firstName.style.fontSize = (120 / lastNameText.length) + "px";
.name-box { width: 600px; }
.last-name { font-size: 26px; }
.first-name: { font-size: 26px; }
<div class="name-box">
<div class="last-name">McDonald</div>
<div class="first-name">David</div>
</div>

You're going to need javascript here, unfortunately. You can get close using viewport percentages, but that applies to the whole viewport. And it would only be for one container, not a preceding container. What you are going to need to do is create an algorithm that updates the font sizes, and run it everytime you load HTML/text into those div's.
Something like this should get you started:
function loadNames(var firstName, var lastName) {
//GET THE LENGTH OF THE LASTNAME STRING
var len = lastName.length;
var factor = .7; //CUSTOMIZE THIS TO DO YOUR SIZING BASED ON THE FONT
var fontSize = Math.ceil(factor * len); //GET THE NEW FONT SIZE, BASED ON THE LENGTH AND FACTOR, AND ROUNDED UP
//SET THE TEXT OF THE NAMES
$('firstName').Text(firstName);
$('lastName').Text(lastName);
//SET THE FONT SIZES
$('firstName').css({ 'font-size': fontSize + 'px;' });
$('lastName').css({ 'font-size': fontSize + 'px;' });
}

CSS solution unfortunately is not possible. It's not possible to select partial text inputs, and there's some calculation required that cannot be done with CSS at this point, in this age.
But javascript.. Were you looking for something like this OP?
$(document).on("ready", function(){
var ratio = 20;
$(".name").keydown(function(){
var input_length = $(this).val().length / ratio;
var new_size = (2 - input_length < 1 ? 1 : 2 - input_length);
$(this).css("font-size", new_size+"em");
});
});
input {
width: 40em;
margin: 0 auto;
display: block;
padding: 15px;
}
.main-wrapper {
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main-wrapper">
<input class="name" type="text" placeholder="Enter name" />
</div>

This is another approach how You could achieve the result. Maybe it's possible to do not use table at all but each div should use display:inline-block; property.
$scalingL = $('.last-name').width();
$scalingF = $('.first-name').width();
$('.first-name').css('font-size',($scalingL / $scalingF * 26));
.name-box { width: 600px; background-color: #efefef; border: 1px solid #000; overflow: hidden; white-space: nowrap; }
.last-name { font-size: 26px; overflow: hidden; display:inline-block;}
.first-name { font-size: 26px; display:inline-block;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="name-box">
<table>
<tr>
<td>
<div class="last-name">McDonald-OrAReallySuperDuperLongLastName</div>
</td>
</tr>
</tr>
<td>
<div class="first-name">Something</div>
</td>
</tr>
</table>
</div>

Try this:
<style type="text/css">
.name-box{
width:auto;
overflow:auto;
}
#first-name{
display:inline-block;
width:auto;
clear:both;
float:left;
font-size:1px;
}
#last-name {
display:inline-block;
width:auto;
clear:both;
float:left;
font-size:26px;
}
</style>
<div class="name-box">
<div id="last-name">McDonalds</div>
<div id="first-name">David</div>
</div>
<script type="text/javascript">
var ln = document.getElementById("last-name");
var fn = document.getElementById("first-name");
for ( i = 1; ln.offsetWidth>fn.offsetWidth; i+=.5)
{
fn.style.fontSize=(i)+"px";
}
</script>
<style type="text/css">
.name-box{
width:auto;
overflow:auto;
}
#first-name{
display:inline-block;
width:auto;
clear:both;
float:left;
font-size:1px;
}
#last-name {
display:inline-block;
width:auto;
clear:both;
float:left;
font-size:26px;
}
</style>
<div class="name-box">
<div id="last-name">McDonalds</div>
<div id="first-name">David</div>
</div>
<script type="text/javascript">
var ln = document.getElementById("last-name");
var fn = document.getElementById("first-name");
for ( i = 1; ln.offsetWidth>fn.offsetWidth; i+=.5)
{
fn.style.fontSize=(i)+"px";
}
</script>

Code works in jsfiddle but not in html page [duplicate]

This question already has an answer here:
jquery code works on codepen/jsfiddle but not html page
(1 answer)
Closed 6 years ago.
I am using code from Max lines textarea to create a textarea with only 9 lines and this code works perfectly on my jsfiddle, https://jsfiddle.net/cityFoeS/3j48cpzn/ The textarea will not limit the textarea to 9 lines like I want it to.
my HTML:
<html>
<head>
<style>
body {
background: black;
}
textarea {
overflow: hidden;
resize: none;
font-family: courier;
color: white;
outline: none;
line-height: 20px;
margin: 0;
padding: 0;
border: 0;
left: 45px;
position: absolute;
font-size: 14px;
background-color: black;
border-bottom: 1px solid white;
}
div {
font-family: courier;
color: white;
line-height:20px;
position: absolute;
font-size: 14px;
width: 29px;
border-right: 1px solid white;
border-bottom: 1px solid white;
left: 10px;
}
</style><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript">
var limit = 9; // <---max no of lines you want in textarea
var textarea = document.getElementById("splitLines");
var spaces = textarea.getAttribute("cols");
textarea.onkeyup = function() {
var lines = textarea.value.split("\n");
for (var i = 0; i < lines.length; i++)
{
if (lines[i].length <= spaces) continue;
var j = 0;
var space = spaces;
while (j++ <= spaces)
{
if (lines[i].charAt(j) === " ") space = j;
}
lines[i + 1] = lines[i].substring(space + 1) + (lines[i + 1] || "");
lines[i] = lines[i].substring(0, space);
}
if(lines.length>limit)
{
textarea.style.color = 'red';
setTimeout(function(){
textarea.style.color = '';
},500);
}
textarea.value = lines.slice(0, limit).join("\n");
};
</script>
</head>
<body>
<div>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10</div><textarea rows="10" cols="50" id="splitLines" onpaste="return false;"></textarea>
</body>
</html>

The problem is that in JSFiddle, you have the option "Load Type" set to "onload" under the JavaScript options.
In your code, however, the JavaScript runs immediately, before the HTML — this will cause the error (and this is what I get when running it as a standalone HTML page):
Uncaught TypeError: Cannot read property 'getAttribute' of null
There are two solutions:
Moving the <script> tags to the end of the <body> tag. For example:
<body>
<!-- all your visible HTML elements -->
<script>
// all your JS code
</script>
</body>
Encapsulating all the JavaScript in a window.onload function or a $(function() {}) (for use with jQuery). For example:
<script>
window.onload = function() {
// all your JS code
};
</script>

Have different line-height between input and output area

I'm trying to make a terminal shell like page.
See my code at jsfiddle:
http://jsfiddle.net/paopaomj/qGw4Q/9/
The input line seems have more line-height then the outputs.
Try it and type something press some enters you'll know what I mean.
Thanks.
html:
<body>
<div id="output"></div>
<div id="input">
root#host
<input type="text" id="command" />
</div>
javascript:
$("#command").keyup(function (e) {
if (e.keyCode == 13) {
submit();
}
});
var submit = function () {
var commandEl = document.getElementById("command");
var command = commandEl.value;
var outputel = document.getElementById("output");
var new_row = document.createElement("div");
new_row.innerHTML = "root#host " + command;
outputel.appendChild(new_row);
commandEl.value="";
};

The input got some padding. Add
padding:0px;
margin-left:-1px;
to the input css

OK.
I got it sovled finally by setting margin=0 for input field, margin-top=0 for iutput div, and margin-bottom=0 for output div:
#output { margin-bottom: 0px; background-color: #000000; }
#input { margin-top: 0px; background-color: #000000; }
input {
border: 0;
background: #000000;
color: #00FF00;
outline: none;
font-family:'Rosario', sans-serif;
font-size: 16px;
padding: 0px;
margin-left: -0.1px;
margin: 0px;
}
Thanks for Johan's help!