CODEWITHSUNDEEP
javascripthtmldom
JustAnotherSimpleProgrammer__
JustAnotherSimpleProgrammer__

Reputation: 56

Javascript replaceChild doesn't show the message

I have this code

 <!DOCTYPE html>
        <html lang="it">
        <head>
        <script>
        function insertAfter(newNode, referenceNode) {
            referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
        }
        
        
        function writeMess(node, mess){
        	elementEx= document.getElementsByTagName("br").length;
        	if(elementEx < 5){
        		newerrmess = document.createTextNode(mess);
        		node.replaceChild(newerrmess, node.firstChild);
        		br = document.createElement("br");
        		insertAfter(br, node);
        	}
        }
        
        
        function Add(){
        	try{
        
        		writeMess(nodoMessErr1, "");
        		var capsule = parseInt(nodoCapsule.value);
        
        		/* Check correct values */
        		if(!isNaN(capsule)){
        			totcapsule = capsule;
        		}
        		else{
        		/* Err Mess */
        		writeMess(nodoMessErr1, "Error Mess 1");
        		return;
        	  }
        	}	
        	catch( e ){
        		alert("Aggiunta " + e);
        		return;
        	}
        }	
        
        var nodoAdd;
        var nodoCapsule;
        var nodoMessErr1;
        var totcapsule;
        
        
        /* Core function */
        function gestoreLoad(){
        
        try{
        
        	nodoAdd = document.getElementById("aggiunta");
        	nodoCapsule= document.getElementById("capsule");
        	nodoMessErr1 = document.getElementById("adderr");
        
        	
        	nodoAdd.onclick = Add;
        	nodoCapsule.value = "";
        
        	var TextNodeErr_1= document.createTextNode("");
        	nodoMessErr1.appendChild(TextNodeErr_1);
        
        
        	}
        	catch(e){
        		alert("gestoreLoad " + e);
        	}
        }
        
        
        
        window.onload = gestoreLoad;
        </script>
        </head>
        <body>
        	<span id="adderr"></span>
        	
        	<input type="text" id="capsule" /> 
        	<input type="button" id="aggiunta" value="Add"/> 
        	
        
        
        </body>
        </html>

Function writeMess works as a "writer" of messages (textnode) to append as a child of span and put after span a "< br >"

Look the "Add" function, my program works like when the user put NaN values in "nodoCapsule.value" shows an error message (default "") that alerts him.

I try to press the button (id="Aggiunta") writing NaN values in it, but no message is shown (only a " < br > " is created but no text before it)

I don't know why, any solutions?

EDIT -- It depends from browser, other browser show me the error message but continue to create "< br >". I would like only one "< br >" when the error message is shown. And no message and no br where the message it's not shown.

Upvotes: 0

Views: 61

Answers (1)

Kiran Shinde
Kiran Shinde

Reputation: 5982

You just need to check whether there is already a br tag or not

You can check by

if (node.nextElementSibling.tagName.toLowerCase() !== "br") {
     // add br
}

Working example

function insertAfter(newNode, referenceNode) {
    referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}


function writeMess(node, mess){
    elementEx= document.getElementsByTagName("br").length;
    if(elementEx < 5){
        newerrmess = document.createTextNode(mess);
        node.replaceChild(newerrmess, node.firstChild);
        if (node.nextElementSibling.tagName.toLowerCase() !== 'br') {
            br = document.createElement("br");
            insertAfter(br, node);
        }
    }
}


function Add(){
    try{
        debugger;
        writeMess(nodoMessErr1, "");
        var capsule = parseInt(nodoCapsule.value);

        /* Check correct values */
        if(!isNaN(capsule)){
            totcapsule = capsule;
        }
        else{
        /* Err Mess */
        writeMess(nodoMessErr1, "Error Mess 1");
        return;
      }
    }   
    catch( e ){
        alert("Aggiunta " + e);
        return;
    }
}   

var nodoAdd;
var nodoCapsule;
var nodoMessErr1;
var totcapsule;


/* Core function */
function gestoreLoad(){
debugger;
try{

    nodoAdd = document.getElementById("aggiunta");
    nodoCapsule= document.getElementById("capsule");
    nodoMessErr1 = document.getElementById("adderr");


    nodoAdd.onclick = Add;
    nodoCapsule.value = "";

    var TextNodeErr_1= document.createTextNode("");
    nodoMessErr1.appendChild(TextNodeErr_1);


    }
    catch(e){
        alert("gestoreLoad " + e);
    }
}



window.onload = gestoreLoad;
<body>
        	<span id="adderr"></span>
        	
        	<input type="text" id="capsule" /> 
        	<input type="button" id="aggiunta" value="Add"/> 
        	
        
        
        </body>

Upvotes: 1

Related Questions