We Keep Coding

Problem with querySelector() not modifying value, onblur or onfocus in <input> tag

I must be screwing something up. When I try to use querySelector() in Javascript I can't seem to modify the value, onblur and onfocus clauses of an input tag but I can modify it's id and name using JavaScript. Help!
I cloned a chunk of HTML code with the following;
const newAdjustment = lastAdjustment.cloneNode(true);
The input tag I'm modifying looks like this;
<input type="text" class="form-control text-right entered-amount"
id="Amount15" name="Amount15" value="$3.00"
onfocus="deformatAmount(15)" onblur="recalc(15)">
</input>
I have no problem using querySelector() to modify the id and name of the input tag;
const originalSequenceNumber = 15;
const newSequenceNumber = originalSequenceNumber + 1;
const originalAIdName = 'Amount' + originalSequenceNumber;
const newAIdName = 'Amount' + newSequenceNumber;
newAdjustment.querySelector("#" + originalAIdName).id = newAIdName;
newAdjustment.querySelector("#" + newAIdName).name = newAIdName;
This leaves me with the following;
<input type="text" class="form-control text-right entered-amount"
id="Amount16" name="Amount16" value="$3.00"
onfocus="deformatAmount(15)" onblur="recalc(15)">
</input>
I then try to modify value, onblur and onfocus with the following;
const newAOnfocus = 'deformatAmount(' + newSequenceNumber + ')';
const newAOnblur = 'recalc(' + newSequenceNumber + ')';
newAdjustment.querySelector("#" + originalAIdName).value = "$0.00 ";
newAdjustment.querySelector("#" + newAIdName).onfocus = newAOnfocus;
newAdjustment.querySelector("#" + newAIdName).onblur = newAOnblur;
and nothing happened. newAOnFocus, newOnBlur and the input element are as follows;
newAOnfocus = deformatAmount(16)
newAOnblur = recalc(16)
newAdjustment = <input type="text" class="form-control text-right entered-amount" id="Amount16" name="Amount16" value="$3.00" onfocus="deformatAmount(15)" onblur="recalc(15)">
After I append the child to the document and use document.querySelector() I can modify the value but not the onblur or onfocus clauses. What am I doing wrong? What clause am I missing from querySelector()? By the way, there a three input and three button tags in newAdjustment and I'm having the same problem with all six.
Correction about .value
.value was updated correctly. The page reflected the correct value in .value but when I did a console.log() of newAdjustment it displayed the original value from the cloning (.cloneNode()). I'm wondering if I'm having the same problem with the rest, which means I'm actually not having a problem at all. More testing to follow.

You can use setAttribute on the input.
So
newAdjustment.querySelector("#" + originalAIdName).value = "$0.00 ";
newAdjustment.querySelector("#" + newAIdName).onfocus = newAOnfocus;
newAdjustment.querySelector("#" + newAIdName).onblur = newAOnblur;
Becomes
newAdjustment.querySelector("#" + originalAIdName).setAttribute("value", "$0.00 ");
newAdjustment.querySelector("#" + newAIdName).setAttribute("onfocus", newAOnfocus);
newAdjustment.querySelector("#" + newAIdName).setAtribute("onblur", newAOnblur);

Javascript function for form created using Javascript

I have a script which adds a new form when a button is clicked to a HTML page with the code as following:
<script>
var counter = 1;
var limit = 10;
function addInput(divName){
if (counter == limit) {
alert("Max number of forms, " + counter );
}
else
{
var newdiv = document.createElement('div');
newdiv.innerHTML = "<form name='frmMain' action='prelucrare.php' method='POST'><div class='slot' id='dynamicInput' align='center'> Masina " + (counter +1 ) + "<table border='1'><tr><td align='right'><label for='marca'>Marca:</label></td><td colspan='2' align='left'>"
+ "<select id='marc' name='marc'><option selected value=''></option>"
+ "<tr><td align='right'><label for='motorizare1'> Motorizare:</label></td> <td><input type='range' name='motorizare1[]Input' min='0.6' max='5' step='0.1' value=2 id=motor1 oninput='outputUpdate1(value)'></td><td><output for=motorizare1 id=moto1>2</output></td></tr>"
+ "</div></form>"
;
}
document.getElementById(divName).appendChild(newdiv);
counter++;
}
</script>
<input type="button" value="Adauga" onClick="addInput('dynamicInput');">
And I have the script bellow which changes the value from the slider.
<script>
function outputUpdate1(mot1) {
document.querySelector('#moto1').innerHTML = mot1;
}
</script>
My problem is that the JS code only changes the input for the first form, even if the slider is activated from another form. In short, the slider should return the value in the form from which it is activate; not only in the first form added.
Thank you!

Going along with my comment, the problem is stemming from the id value being the same across all of your output elements (moto1). You've actually got all the variables you need to make them unique since you're tracking a count of the number of forms on the page (your counter variable). You can use this in place of your current output HTML:
"<input type='range' name='motorizare1[]Input' min='0.6' max='5' step='0.1' value=2 id='motor_" + counter + "' oninput='outputUpdate1(value)'/>"
"<output for=motorizare1 id='moto_" + counter + "'>"
You can update your function to parse out the correct index for the output you want to update since they should be in sync if you use the HTML above:
function outputUpdate1(mot) {
// Get the counter part of the range element's id
var index = mot.id.split('_')[1];
document.querySelector('#moto_' + index).innerHTML = mot;
}
You may need to make some tweaks to code you haven't provided in the question, but that's one way of making the id values unique and how to access them without knowing the exact id ahead of time.

JavaScript Clears My Input Values

I am writing a simple form at work using HTML and have added JavaScript to the page to allow users to add extra rows to a table. This table has input type="Text" tags and select tags. When the user clicks the button to add a row, the JavaScript adds a row, but clears the input and select tags.
My script is
var x = x + 1;
function another()
{
x = x + 1;
y = y + 1;
var bigTable = document.getElementById("bigTable");
bigTable.innerHTML += ("<TR><TD CLASS=\"bigTable2\" ALIGN=\"Center\"><SELECT
NAME=\"PO" + x + "\"><OPTION>Select</OPTION><OPTION>1234567890</OPTION></SELECT>
</TD><TD CLASS=\"bigTable2\" ALIGN=\"Center\"><INPUT TYPE=\"Text\" NAME=\"SKU" + x
+ "\"></TD><TD CLASS=\"bigTable2\" ALIGN=\"Center\"><INPUT TYPE=\"Text\"
NAME=\"modelNum" + x + "\"></TD><TD CLASS=\"bigTable2\" ALIGN=\"Center\"><INPUT
TYPE=\"Text\" NAME=\"itemNum" + x + "\"></TD><TD CLASS=\"bigTable2\"
ALIGN=\"Center\"><INPUT TYPE=\"Text\" NAME=\"qty" + x + "\" ID=\"qty"+x+"\"
onBlur=\"total();\"></TD></TR>");
}
I'm not sure what the issue is here. Is the "+=" statement basically resetting my table like an = statement would?
EDIT: I don't know how to get all of the code to appear, but what is displayed is not all of my code. I have a basic Table and using JavaScript use a += statement to add HTML to it.
EDIT: My table is this:
<TABLE ID="bigTable">
<TR>
<TH>P.O. #</TH>
<TH>SKU #</TH>
<TH>Model #</TH>
<TH>Item #</TH>
<TH>Quantity</TH>
</TR>
<TR>
<TD CLASS="bigTable" ALIGN="Center">
<SELECT NAME="PO1">
<OPTION>Select</OPTION>
<OPTION>1234567890</OPTION>
</SELECT>
</TD>
<TD CLASS="bigTable2" ALIGN="Center"><INPUT TYPE="Text" NAME="SKU1"></TD>
<TD CLASS="bigTable2" ALIGN="Center"><INPUT TYPE="Text" NAME="modelNum1"></TD>
<TD CLASS="bigTable2" ALIGN="Center"><INPUT TYPE="Text" NAME="itemNum1"></TD>
<TD CLASS="bigTable2" ALIGN="Center"><INPUT TYPE="Text" NAME="qty1" ID="qty1" onBlur="total();"></TD>
</TR>
</TABLE>
My JavaScript Replicates everything between the tags. And I use the variable x to update the number in the names for the inputs and dropdowns. Variable Y is used to increment a calculation function.

When you edit the innerHTML of a HTML element, the entire DOM gets re-parsed. Since the input's values aren't actually stored in the input elements's HTML, they are cleared.
An option would be to use DOM manipulation to add the row:
function another(){
x = x + 1;
y = y + 1;
var bigTable = document.getElementById("bigTable");
vat tr = document.createElement('tr');
tr.innerHTML = ("<td class='bigTable2' align='Center'><select name='PO" + x + "'><option>select</option><option>1234567890</option></select></td>"+
"<td class='bigTable2' align='Center'><input type='Text' name='SKU" + x + "'></td>"+
"<td class='bigTable2' align='Center'><input type='Text' name='modelNum" + x + "'></td>"+
"<td class='bigTable2' align='Center'><input type='Text' name='itemNum" + x + "'></td>"+
"<td class='bigTable2' align='Center'><input type='Text' name='qty" + x + "' ID='qty" + x + "' onBlur='total();'></td>");
bigTable.appendChild(tr);
}
Notice how the string no longer contains a <tr> tag.
This codes creates a tr element, then adds the rows to it, then adds that whole, (parsed), tr to the table.
(I also changed the tags / attributes to lowercase and replaced all \" with ' to make it more readable)

To be clear, x += y is the same as writing x = x + y. What's happening here is that you are overwriting the HTML with what you had plus the new row. This clears your inputs because their values are not stored in the HTML (when you type inside one of the input, it's "value" property is not updated in the actual HTML).
So you are basically overwriting your HTML with what was there initially plus some added nodes.
EDIT: Go for Cerbrus's solution. Much cleaner.

What I ended up going with was a dynamic JavaScript code that would create a dynamic array and store values in each column of my current table. Then the code created a new row and the array was then accessed to repopulate the values.

.innerHTML to generate a new input?

i'm trying to use .innerHTML and appendChild to generate a new input with a value that is equal to a 's value. However it doesn't seem to be working and I don't understand why..
Here is my JS code:
function generateClass() {
var value = document.getElementById("Classes").value;
var originalDiv = document.getElementById("selectDiv");
var newDiv = document.createElement("div");
newDiv.innerHTML = "<input type='text' name='class' value='" + value + "' disabled />"
originalDiv.appendChild(newDiv);
}
The select is simply:
<select name="class" id="Classes">
can anyone tell me what i'm doing wrong?
Thanks

Sorry Guys,
I've fixed my problem, i'd been an idiot with some earlier JS code.
Sorry for wasting your time.

Radiobutton unchecks Checkbox in the same table row

I render a table using javascript that has a checkbox and a radiobutton on each row of data. Here is a snippet of the code that renders the radiobutton and checkbox.
htmlResult += '<td><input type="checkbox" name="checkBoxes" class="selectLink" id="chkbxRow' + rowCounter + '"style="vertical-align: sub;"/></td>';
htmlResult += '<td><input type="radio" name="isLoanRecipient" value="' + rowCounter + '" id="radioRow' + rowCounter + '"style="vertical-align: sub;"/></td>';
The table is displayed however when I click on the radiobutton, if the checkbox on the same row is previously checked, it unchecks it. Did anyone encountered the same problem? Does anyone know what might be the cause of this? Thanks.
By the way, I'm referencing jquery scripts(1.5.1, validate, validate.unobtrusive, ui)

maybe the solution is simply to insert a space:
id="chkbxRow' + rowCounter + '"style="vertical-align: sub;"
id="chkbxRow' + rowCounter + '" style="vertical-align: sub;"
The same would go for the line with the radios.