I’m trying to read the value of a div in javascript (see variable testo) but I can’t do it and it seems impossible to me since I can read all the other properties like the id and the style.
Here is the Html+Flask code:
<div id="TestoWrapper" style="font-size: 2.25rem; margin-left: 120px; width:inherit; text-align: center;">
<div value="{{item.Collana}}" style="font-size: 2.25rem; margin-left: 0px; width:900; text-align: center;"id="Testo" >{{item.Collana}}</div>
<div class="u-file-icon u-icon u-block-8724-13 bloccoiconapencil" id="bloccoiconapencil"><img src="{{ url_for('static', filename = 'images/274713.png') }}" alt="" id="img-icon-edit"> </div>
<div class="u-file-icon u-icon u-block-8724-14" id="bloccoiconax" ><img src="{{ url_for('static', filename = 'images/x3.png') }}" alt="" id="img-icon-delete"></div>
<input style="display:none;",type="text" id="Edit" value="False" name="Edit" class="u-border-2 u-border-white u-input u-input-rectangle u-radius-17 u-text-body-alt-color u-input-5">
<input style="display:none;",type="text" id="Delete" value="False" name="Delete" class="u-border-2 u-border-white u-input u-input-rectangle u-radius-17 u-text-body-alt-color u-input-5">
<input style="display:none;",type="text" id="ID" value="{{item.ID}}" name="" class="u-border-2 u-border-white u-input u-input-rectangle u-radius-17 u-text-body-alt-color u-input-5">
</div>
Here the JavaScript function:
document.querySelectorAll('.bloccoiconapencil').forEach(occurence => {
occurence.addEventListener('click', (e) =>
{
console.log("icon-edit-clicked");
parent=e.target.parentNode.parentNode;
let edit = parent.querySelector("#Edit").value;
let testo=parent.querySelector("#Testo");
if (edit=="False"){
console.log(testo.value);
parent.querySelector("#Testo").innerHTML="<input type='text' id='name-677d' value='"+ testo +"'name='name' style='width:1150px;' class='u-border-2 u-border-white u-input u-input-rectangle u-none u-radius-17 u-block-8724-10' autofocus='autofocus'>";
parent.querySelector("#img-icon-edit").src="{{url_for('static',filename='images/753318.png') }}";
console.log(testo);
}
else{
document.getElementById("form").submit();
}
});
});
when I log the testo.value it gives “undefined” whereas if I just log testo I get:
<div value="Doctor Strange" style="font-size: 2.25rem; margin-left: 0px; width:900; text-align: center;" id="Testo">
<input type="text" id="name-677d" value="[object HTMLDivElement]" name="name" style="width:1150px;" class="u-border-2 u-border-white u-input u-input-rectangle u-none u-radius-17 u-block-8724-10" autofocus="autofocus">
</div>
which is correct.
Also, if I try to log testo.style or testo.id, it does log the right value, just testo.value is undefined. I’m literally getting crazy, I used the same function with #Edit on the line above and it works just fine. The only difference is that testo.value is assigned via Flask, but I used the same thing on other pages and it works