In order to access this site you need to enable JavaScript!

You are here: Reference > JavaScript > client-side > event handling > properties > newValue (event)

newValue property (event)

Browser support:

9

Retrieves a string that specifies the current value of the modified attribute or TextNode element.

This property of the event object is available in DOMAttrModified and DOMCharacterDataModified event handlers.

When an attribute is modified, you can get the type of the action that modified the attribute with the attrChange property and the name of the modified attribute with the attrName property. Use the prevValue property to get the previous value of the modified attribute or TextNode element.

See the description of the DOMAttrModified and DOMCharacterDataModified events and the example below for further details.

Note that the newValue property is always empty in case of the DOMCharacterDataModified event in Firefox (see Example 2 below).

Syntax:

object.newValue;

You can find the related objects in the Supported by objects section below.

This property is read-only.

Possible values:

String that represents the current value of the attribute or TextNode element.

Default: this property has no default value.

Example HTML code 1:

This example shows a cross-browser solution to get the new value of the attribute that was changed:

<head>
    <script type="text/javascript">
        function AddListeners () {
            var elemToCheck = document.getElementById ("myDiv");
            if (elemToCheck.addEventListener) { // all browsers except IE before version 9
                    // Firefox, Opera, IE from version 9
                elemToCheck.addEventListener ('DOMAttrModified', OnAttrModified, false);
            }
            if (elemToCheck.attachEvent) {  // Internet Explorer and Opera
                elemToCheck.attachEvent ('onpropertychange', OnAttrModified);   // Internet Explorer
            }
        }

        function OnAttrModified (event) {
            var message = "";
            if ('attrChange' in event) {    // Firefox, Opera, Internet Explorer from version 9
                message += "The element: " + event.target;
                message += "\nproperty: " + event.attrName;
                message += "\noriginal value: " + event.prevValue;
                message += "\n changed to: " + event.newValue;
            }
            if ('propertyName' in event) {  // Internet Explorer
                message += "The element: " + event.srcElement.tagName;
                message += "\nproperty: " + event.propertyName;

                var elem = event.srcElement;
                message += "\nvalue changed to: " + elem.attributes[event.propertyName].value;
            }
            alert (message);
        }

        function ChangeTitle () {
            var div = document.getElementById ("myDiv");
            div.title = "New Alternate";
        }
    </script>
</head>
<body onload="AddListeners ();">
    <button onclick="ChangeTitle ();">Change alternate text!</button>
    <div id="myDiv" title="Alternate text">
        Hover the mouse over.
    </div>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example illustrates the use of the newValue property for DOMAttrModified events:

<head>
    <script type="text/javascript">
        function InitListener () {
            var elemToCheck = document.getElementById ("myDiv");
            if (elemToCheck.addEventListener) { // all browsers except IE before version 9
                    // Firefox, Opera, IE from version 9
                elemToCheck.addEventListener ('DOMAttrModified', OnAttrModified, false);
            }
            if (elemToCheck.attachEvent) {  // Internet Explorer and Opera
                elemToCheck.attachEvent ('onpropertychange', OnAttrModified);   // Internet Explorer
            }
        }

        function OnAttrModified (event) {
            var message = "";
            if ('attrChange' in event) {    // Firefox, Opera, Internet Explorer from version 9
                message += "Something has happened to an attribute of the " + event.target.tagName + " element.\n";
                switch (event.attrChange) {
                case MutationEvent.MODIFICATION:
                    message += "The value of the " + event.attrName + " attribute has been changed from "
                                + event.prevValue + " to " + event.newValue + ".";
                    break;
                case MutationEvent.ADDITION:
                    message += "The " + event.attrName + " attribute has been added to the element "
                                + "with the value of " + event.newValue + ".";
                    break;
                case MutationEvent.REMOVAL:
                    message += "The " + event.attrName + " attribute has been removed from the element."
                                + "The value was " + event.prevValue + " previously.";
                    break;
                };
            }

            if ('propertyName' in event) {  // Internet Explorer
                message = "The " + event.propertyName + " property of the "
                           + event.srcElement.tagName + " element has been changed.";
            }

            alert (message);
        }

        function ModifyAlign () {
            var elemToCheck = document.getElementById ("myDiv");
            if (elemToCheck.align == "right")
                elemToCheck.align = "left";
            else
                elemToCheck.align = "right";
        }

        function ModifyBackgroundColor () {
            var elemToCheck = document.getElementById ("myDiv");
            elemToCheck.style.backgroundColor = "#aaccee";
        }

        function CreateModifyRemoveAttr () {
            var elemToCheck = document.getElementById ("myDiv");
                // when an attribute is created, the onpropertychange event is not fired
            elemToCheck.setAttribute ("newAttr" , "firstValue");
                // when the value of an attribute is modified, the onpropertychange event is fired
            elemToCheck.setAttribute ("newAttr" , "secondValue");
                // when an attribute is removed, the onpropertychange event is not fired
            elemToCheck.removeAttribute ("newAttr");
        }
    </script>
</head>
<body onload="InitListener ();">
    <div id="myDiv" style="background-color:#e0c0a0;">
        The alignment can be modified with the first button<br />
        The background color can be changed with the second button<br />
        Finally, with the third button you can create, modify and remove an attribute.
    </div>
    <br /><br />
    <button onclick="ModifyAlign ();">Modify the alignment</button><br />
    <button onclick="ModifyBackgroundColor ();">Modify the color of the background</button><br />
    <button onclick="CreateModifyRemoveAttr ();">Create, modify and remove an attribute</button>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 3:

This example illustrates the use of the newValue property for DOMCharacterDataModified events:

<head>
    <script type="text/javascript">
        function InitListener () {
            var container = document.getElementById ("textContainer");
            var textNode = container.firstChild;
            if (textNode.addEventListener) {
                textNode.addEventListener ('DOMCharacterDataModified', OnCharacterModified, false);
            }
        }

        function DeleteData () {
            var container = document.getElementById ("textContainer");
            var textNode = container.firstChild;
            if (textNode.length >= 2)
                textNode.deleteData (0,2);
        }

        function OnCharacterModified (event) {
            var currentValue = event.newValue;
            if (currentValue != event.target.data) {
                alert ("The value of the newValue property is incorrect!");     // Firefox
                currentValue = event.target.data;
            }
            
            alert ("The contents of the text node are changed from '"
                    + event.prevValue + "' to '" + currentValue + "'.");
        }
    </script>
</head>
<body onload="InitListener ();">
    <div id="textContainer">Some text content for testing.</div>
    <br />
    <button onclick="DeleteData ();">Delete the first to character from the text above!</button>
</body>