Develop Reference

How do a maintain an accurate character count between input from separate fields using JS?

I am using a form to build a block of text, the final output of which needs to be kept under a certain character count.
For the user, I need to be able to provide real-time character counting so they can adjust their entries as appropriate.
Basic HTML would be as follows:
<form>
<input type="text" id="#input1">
<input type="text" id="#input2">
</form>
<div class="character-counter">0</div>
However my JS/jQuery is not working very well: while it is outputting a counter in real time, it seems to be concatenating the final results in the output despite me parsing the variables as integers.
$('#input1').keyup(function() {
// Variables
var currentCharCount = parseInt($('.character-counter').text());
var fieldLength = parseInt($(this).val().length, 10);
var newCharCount = fieldLength + currentCharCount;
// Counter output
$('.character-counter').text(Number(newCharCount));
});
$('#input2').keyup(function() {
// Variables
var currentCharCount = parseInt($('.character-counter').text());
var fieldLength = parseInt($(this).val().length, 10);
var newCharCount = fieldLength + currentCharCount;
// Counter output
$('.character-counter').text(Number(newCharCount));
});
The correct solution will update the '.character-counter' div with the correct total character count between the fields every time a character is typed or deleted or pasted in.
Thanks!

You don't want the old value of the character-counter element at all, you purely want to use the lengths of the text in the two inputs. Separately: Don't use keyup, use input. (What if the user right-clicks and pastes? No keyup occurs...)
Separately, the id attributes of your input fields are incorrect: They shouldn't have the # on them.
So (see comments):
// You can hook the event on both fields with the same call
// Note using `input`, not `keyup`
$("#input1, #input2").on("input", function() {
// Get the length of each input's current value, then put it
// in the .character-counter div
$('.character-counter').text($("#input1").val().length + $("#input2").val().length);
});
<form>
<input type="text" id="input1">
<!-- No # here --------^ -->
<input type="text" id="input2">
<!-- Nor here ---------^ -->
</form>
<div class="character-counter">0</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Form help: input - output for math function

I need help. I need the javascript code for the following function:
n = 1 + (log(5156559813)/log(x))/log(3)
where n is the output and x is the input box.
How do I make the input box be the x? Do I use document.getElementById("x").innerHTML = 1 + (Math.log(5156559813) / Math.log(x)) / Math.log(3)?
I've searched but the wrong thing keeps coming up every time.
Here's my code:
<form class="uk-form">
<fieldset data-uk-margin>
<input type="text" placeholder="People in your group" id="x">
<button class="uk-button uk-button-primary">Go!</button>
<p id="number"></p>
</fieldset>
<script type="text/javascript">
function n(x){
return document.getElementById("number").innerHTML = 1 + (9.7123600597) / Math.log(x)) / 0.4771212547;
document.getElementById('x').addEventListener('change', function () {
document.getElementById('n').innerHTML = n(this.value);
}, false);
}
</script>
</form>
Whenever I hit my button, the page refreshes and I am back at the beginning again.
Thank you very much!

Use Math.log() for base e, Math.log10() for base 10 and Math.log2() for base 2. Note that log10 and log2 are currently not supported on Internet Explorer

Using Math.log():
function n(x)
{
return 1 + (Math.log(5156559813) / Math.log(x)) / Math.log(3);
}
x is your input, and n(x) is your output.
If you want this function to be calculated each time that an input's value is changed, you can attach an event listener:
// As you stated in the commentes, x can be found in <input id="x">.
document.getElementById('x').addEventListener('change', function () {
// If your output goes into an <input>
document.getElementById('n').value = n(this.value);
// If your output goes into an <div>, <span> or another non self-closing HTML tag:
document.getElementById('n').innerHTML = n(this.value);
}, false);

How to concatenate a JS variable in an HTML script?

Can I do something like this?
var counter = SomeJSFunctionThatReturnsAvalue();
<tr><td> <input type="file" name="file-upload"+"_counter" id="file-upload" /></tr></td>
Can I do that? I need to append an underscore and an incremented number to the name.
Also, an off-topic question - that function above returns the value of an input type, for example:
<input type="hidden" name="hidden-input-type" value="2" />
Is the value "2" a number that I can use for math operations? If not, how can I make it one?

Here you go fella.
<head>
<script>
function test($count) {
document.getElementById("test1").setAttribute("name","file-upload_" + $count);
}
</script>
</head>
<body>
<p>some content</p>
<input id="test1" type="file" name="file-upload" id="file-upload" value="2"/>
<p>some other content</p>
<script>test(1);</script>
</body>
Your SomeJSFunctionThatReturnsAvalue(); would pass it to test() function.
to get the value of "2" from your second question for use in a math function, just do:
var value = document.getElementById("test1").getAttribute("value");
document.write(parseInt(value, 10) + 3);
which returns 5.

To append the return value of your function to the name of the input tag, you can assign it to the name attribute of the input.
var counter = SomeJSFunctionThatReturnsAvalue();
var fileUpload = document.getElementById('file-upload');
fileUpload.name = fileUpload.name + "_" + counter;
You can get the type of a variable by using "typeof"
typeof myValue; // "string"
You can change this to an integer by using the parseInt() function.
var intValue = parseInt(myValue, 10);

You can change the name using .setAttribute("name", theNameUwantToChangeTo);:
function changeName(number){
var ele = document.getElementById("file-upload");
ele.setAttribute("name", b.getAttribute("name")+ "_" + number);
}
changeName(number);
To get the value, just .value:
function getV(){
return document.getElementById("file-upload").value;
}
var number = getV();
In case it does not return int, use parseInt()
function getV(){
return parseInt(document.getElementById("file-upload").value);
}
var number = getV();

Maybe you would benefit from looking into Angular.js or Ember.js if you are trying to do things like this. They can do data binding so that you can make readable and dynamic code just like what you are trying to create in your question.
If not that^ then this:
I saw you mentioned in a comment that you are dynamically creating the list. That is where you should be assigning the correct name with the counter (assuming there's no desire for counter to change dynamically. If there is a dynamic change then tell us what events are doing the change) Could you show us the code that is doing that please?

I'm trying to get the innerHTML function in Javascript to work

I want the heating answer to appear next to the Heating Surface (mm) but I can't make it work. I only get the following error message from the chrome console
Uncaught TypeError: Cannot read property 'value' of null
I know everything else works because I added an alert box, I need the innerHTML to work though.
Here is the html:
<html>
<head>
<script type="text/javascript" src="pipeheaterfunction.js">
</script>
</head>
<body>
<table>
<tr><td>Inner Diameter (mm):</td>
<td><input id="dia" onkeypress="pipeheater();"></td>
<tr><td>Pipe Thickness (mm):</td>
<td><input id="thi" onkeypress="pipeheater();"></td>
<tr><th>Calculate heater:</th>
<td><button onclick="pipeheater();">Calculate</button></td></tr>
<tr><td>Heating Surface(mm):</td>
<td><span class="output" id="surface"></span></td></tr>
</table>
</body>
</html>
Here is the javascript code:
function pipeheater(){ //dia is the inner diameter of a pipe, thi is the pipe thickness
var dia = document.getElementById("dia").value;
var thi = document.getElementById("thi").value;
var hsur; //hsur is the heating surface required for a certain pipe in mm
hsur = 5*Math.sqrt(((dia-thi)*thi)/2);
var surface = hsur;
if(surface>0){
surface.innerHTML=surface.toFixed(1);
alert(surface.toFixed(1));
}
}
window.onload=pipeheater();

There are two errors in your script. At first, when setting
window.onload = pipeheater();
pipeheater is invoked immediately, it's not waiting window.onload to be fired, and you get an error when trying to read a value of yet-non-existing element. You can fix this like this:
window.onload = pipeheater;
Secondly, you try to use innerHTML of hsur, which is a number. You need to define a variable for the actual HTML element. Below is your fixed code.
function pipeheater() {
var dia = document.getElementById("dia").value,
thi = document.getElementById("thi").value,
hsur = 5 * Math.sqrt(((dia - thi) * thi) / 2),
surface = document.getElementById("surface");
if (hsur > 0) {
surface.innerHTML = hsur.toFixed(1);
alert(hsur.toFixed(1));
}
}
window.onload = pipeheater;
You can check how this works at jsFiddle. I'd recommend you to validate values of dia and thi before making any calculations with them. Also using onchange instead of onkeypress might be more comfortable for users, and would give you more reliable results.

You forgot to define "surface".
var surfaceSPAN = document.getElementById("surface");
You can then do:
surfaceSPAN.innerHTML = surface.toFixed(1);
Do note that you cannot use the variable name "surface" twice in one script, as they would overrule eachother and you'd have no variable result.

How to return a variable from a javascript function into html body

I am still new to javascript, and I am trying to get a function to return a variable using html & javascript. Basically the function should just return whichever radio button that the user clicks on, although at the moment I don't see anything being returned at all.
The function is here:
<script type="text/javascript">
function GetSelectedItem() {
var chosen = ""
len = document.f1.r1.length
for (i = 0; i <len; i++) {
if (document.f1.r1[i].checked) {
chosen = document.f1.r1[i].value
}
}
}
return chosen
</script>
And then in the html section I have these radio buttons, and my attempt to get the variable "chosen" output to the screen.
<form name = f1><Input type = radio Name = r1 Value = "ON" onClick=GetSelectedItem()>On
<Input type = radio Name = r1 Value = "OFF" onClick =GetSelectedItem()>Off</form>
<script type ="text/javascript">document.write(chosen)</script>
At the moment nothing seems to be getting returned from the function (although if I output the variable 'chosen' inside the function then it is working correctly.
Thanks in advance!

Here's a little simpler approach.
First, make a few corrections to your HTML, and create a container to display the output:
<form name = "f1"> <!-- the "this" in GetSelectedItem(this) is the input -->
<input type = "radio" Name = "r1" Value = "ON" onClick="GetSelectedItem(this)">On
<input type = "radio" Name = "r1" Value = "OFF" onClick ="GetSelectedItem(this)">Off
</form>
<div id="output"></div>
Then change your script to this:
<script type="text/javascript">
// Grab the output eleent
var output = document.getElementById('output');
// "el" is the parameter that references the "this" argument that was passed
function GetSelectedItem(el) {
output.innerHTML = el.value; // set its content to the value of the "el"
}
</script>
...and place it just inside the closing </body> tag.
Click here to test a working example. (jsFiddle)

document.write takes a string, and outputs it as part of the HTML. This is not a live value that updates when the variable pointing at the string is updated.
For that, you will need to perform DOM manipulation.

Change your JavaScript function to something like that:
<script type="text/javascript">
function GetSelectedItem() {
len = document.f1.r1.length;
for (i = 0; i <len; i++) {
if (document.f1.r1[i].checked) {
document.getElementById('test').textContent = document.f1.r1[i].value;
}
}
}
</script>
And then in the body:
<div id="test"></div>

As I put in the post. Using JQuery would make your life easy for this kind of task (and many others for the matter). The really nice thing about JQuery is that it often makes your JavaScript syntax much easier then you can learn the nitty gritty details of javascript as you go.
First, add the following script tag into your html page
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
Now you have the JQuery API
Then you could rewrite the function like this.
function GetSelectedItem(btnRadio)
{
var jqElem = $(btnRadio);
$('#output').html(jqElem.attr('value')); //attr('<name of attributre'>) gets the value of the selected attribute
}
Your html would look like this
<form name = "f1">
<input type = "radio" name = "r1" value = "On" onclick="GetSelectedItem(this)">On
<input type = "radio" name = "r1" value = "Off" onclick ="GetSelectedItem(this)">Off
</form>
<div id="output">
</div>
More or less, the .html() can both get and set the html of the selected element. So we are just simply inserting the value into the div tag.