0

I need a function to modify the value attribute in the input element when the user modifies it. I have a function that downloads the html into a text file. I want the file to accurately record the current value of the element, not what it was on load.

JS download function:

function saveActors() {
    let fileName = `page.txt`;
    let a = document.createElement("a");
    let target = document.getElementById('target');
    a.download = fileName;
    let content = new Blob([target.innerHTML], {type: 'text/plain;charset=utf-8'});
    a.href = window.URL.createObjectURL(content);
    a.click();
}

HTML:

<div id="target">
    <input type="text" value="" onchange="updateValue(this)">
</div>
<script>
    function updateValue(a) {
    // update the input value
    }
</script>
BonelessCurv
  • 29
  • 6
  • The serialized DOM doesn’t represent the current value, because the `value` _property_ is the current value, whereas the `value` _attribute_ is the initial value, and DOM serialization only looks at the current attribute values. See [What is the difference between properties and attributes in HTML?](/q/6003819/4642212). You’d have to do `target.setAttribute("value", target.value);` to update it. – Sebastian Simon Aug 06 '21 at 21:38
  • 1
    [Duplicate](//google.com/search?q=site%3Astackoverflow.com+js+innerHTML+doesn%E2%80%99t+include+input+value) of [Inner HTML with input values](/q/12126497/4642212). – Sebastian Simon Aug 06 '21 at 21:39

1 Answers1

1

in JavaScript, relation between DOM object and unparsed HTML (so to say property vs attribute) is not 2 way sync. it is one way sync. it means that when you modified DOM objects 'value' property, your HTML in browser won't be chanced.

So you use setAttribute method of DOM. thats all.

ratyacatnug
  • 121
  • 1
  • 5