I want to clear the value of all input filed having class class="axs" inside a given DIV with a button. I am using this JavaScript code:
Using pure vanilla JavaScript how to remove the value attribute like value= ''
let content = document.getElementById("output").innerHTML;
let el = document.createElement('div');
el.innerHTML = content;
let textS = el.querySelectorAll(".axs");
for (let i = 0; i < textS.length; i++) {
let id = textS[i].id;
el.getElementById(id).value = '';
}<div id="output">
<div>
<input class="axs" id="1" type="text" value="1650" spellcheck="false">
<input class="axs" id="2" type="text" value="850" spellcheck="false">
<input class="axs" id="3" type="text" value="340" spellcheck="false">
<input class="axs" id="4" type="text" value="321" spellcheck="false">
<input class="axs" id="5" type="text" value="567" spellcheck="false">
<input class="axs" id="6" type="text" value="890" spellcheck="false">
</div>
</div>Try this out:
document.querySelectorAll(".axs").forEach(x => x.value = '');
First the method querySelectorAll matches all elements with class name .axs and puts them into an array. Then I use the forEach method to loop every element, which I call x and then I set the value of x to empty for each one.
Here an adjusted version of your script
let textS = document.querySelectorAll(".axs");
for (let i = 0; i < textS.length; i++) {
textS[i].value = '';
}<div id="output">
<div>
<input class="axs" id="1" type="text" value="1650" spellcheck="false">
<input class="axs" id="2" type="text" value="850" spellcheck="false">
<input class="axs" id="3" type="text" value="340" spellcheck="false">
<input class="axs" id="4" type="text" value="321" spellcheck="false">
<input class="axs" id="5" type="text" value="567" spellcheck="false">
<input class="axs" id="6" type="text" value="890" spellcheck="false">
</div>
</div>it seems that you are confusing the value of the attribute linked to an input and the current value of an input.
formally you must use a reset and a form replace all the values of the inputs by those fixed in their attribute
example 1:
const
myForm = document.forms['my-form']
, All_Inputs = myForm.querySelectorAll('input')
myForm.clearBt.onclick = () =>
{
All_Inputs.forEach(el=> el.value='')
}<form name="my-form">
<input name="axs1" type="text" value="1650" placeholder="axs1">
<input name="axs2" type="text" value="232" placeholder="axs2">
<input name="axs3" type="text" value="789" placeholder="axs3">
<button type="reset"> real form reset</button>
<button type="button" name="clearBt"> just clear inputs</button>
</form>
<p> the clear button doesn't change the input attribute, <br>
and the default values goes back whith the reset button.
</p>example 2:
const
myForm = document.forms['my-form']
, All_Inputs = myForm.querySelectorAll('input')
myForm.clearBt.onclick = () =>
{
All_Inputs.forEach(el=>el.setAttribute('value',''))
}<form name="my-form">
<input name="axs1" type="text" value="1650" placeholder="axs1">
<input name="axs2" type="text" value="4898" placeholder="axs2">
<input name="axs3" type="text" value="12" placeholder="axs3">
<button type="reset"> real form reset</button>
<button type="button" name="clearBt"> clear inputs attributes</button>
</form>
<p> the clear button change the input attribute, <br>
and the default values will be definitely changed for the reset button.
</p>so, for your question :
document .querySelectorAll('input.axs') .forEach(el=> el.setAttribute('value','')) console.log( document.querySelector('div').innerHTML )<div id="output"> <div> <input class="axs" id="1" type="text" value="1650" spellcheck="false"> <input class="axs" id="2" type="text" value="850" spellcheck="false"> <input class="axs" id="3" type="text" value="340" spellcheck="false"> <input class="axs" id="4" type="text" value="321" spellcheck="false"> <input class="axs" id="5" type="text" value="567" spellcheck="false"> <input class="axs" id="6" type="text" value="890" spellcheck="false"> </div> </div>