Untied variable from DOM object

Question

Let suppose we have:

Let myVar = document.getElementbyId("Sample")

How can I process/modify the value in the javascript variable myVar without affecting anymore the DOM object?

Anytime I do something like: myVar.value = myVar.value + 100; The DOM is altered too, since myVar is representing the DOM object, instead of only have caught its value.

Thanks in advance.

$('#btn').click(function(ev) {
  var a = document.getElementById("myInput")
  var b = a
  b.value = "Why DOM changed?";
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<html>
  <label>Original input value </label>
  <br>
<input type="text" id="myInput" value="55"/>
<button id="btn">Modify Variable - NOT DOM Obj</button>
</html>

*Anytime I do something like: `myVar2 = myVar + 100;` The DOM is altered too, since myVar is representing the DOM object, instead of only have caught its value.* - No, **it's the exact opposite.** `myVar` isn't even a DOM object - it's just the value of the DOM object, a primitive... — Andrew Li, Feb 15 '17 at 23:26
It still won't happen the way you say. Is it possible you wrote `myVar.value += 100`? That assigns back to the `.value` property. — Barmar, Feb 15 '17 at 23:36
Please post an [MCVE](http://stackoverflow.com/help/mcve) that demonstrates the problem. You can use a [Stack Snippet](https://stackoverflow.blog/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/) to put executable HTML and JS in the question. — Barmar, Feb 15 '17 at 23:38
It *still* isn't correct. `myVar` contains the value of an input field, i.e. a **string**. Strings don't have a `value` property. — Felix Kling, Feb 16 '17 at 02:59
This is very different from your original question, where you said you were assigning to the variable, not to a property of the object in the variable. — Barmar, Feb 16 '17 at 16:32

score 0 · Answer 1 · answered Feb 16 '17 at 03:34

0

From MDN on HTMLInputElement:

value: string: Returns / Sets the current value of the control.

It's simple. If you don't want to modify the DOM, then don't set the value attribute of your HTMLInputElement. Instead, save it to another variable and modify it afterwards.

var myInput = document.getElementById('myInput');
myInput.value = myInput.value + 100; // this is where the "issue" exists

// instead...
var inputValue = myInput.value;
inputValue = inputValue + 100; // DOM does not reflect the change

answered Feb 16 '17 at 03:34

chazsolo

7,873
1
20
44

You are right. Perhaps, what I'm trying to do is to get a copy of the DOM object in a variable and modify some attributes of it keeping the object structure inside the var. No matter how many pivot variables I use, the DOM still affected. – Ruben Feb 16 '17 at 03:49
It's because they are by reference. In your update, `b` is pointing to the same element that `a` is. – chazsolo Feb 16 '17 at 03:51
I know, my point is: There is a way to catch the object in an "independent" variable not tied to the DOM? I only need to modify the object structure for other template, not the current one. – Ruben Feb 16 '17 at 03:55
Got it. I've been looking it up myself since I don't know the answer. If I find a way I'll be sure to update my answer! – chazsolo Feb 16 '17 at 03:57
Solved, check my answer. Thanks for your help. – Ruben Feb 16 '17 at 05:21

score 0 · Accepted Answer · edited May 23 '17 at 12:17

Well, I found that any variable in Javascript which is assigned to an array or object (Such as DOM elements) just reference to the original array or object, not having an independent value.

That's why any changes I did to Myvar affected the DOM. What I did to solve the issue is to clone the object into a variable. I did it using a underscore function:

myVar = ._clone(document.getElementbyId("Sample"))

Now I can manipulate myVar without affecting the DOM.
I found the answer here: Copying array by value in JavaScript

Untied variable from DOM object

2 Answers2