javascript - Update HTML content after click

I have an HTML div that contains 3 rooms. What I need is to change the name of any room when I want. "EDIT ROOM NAME" button makes 'contenteditable="false"'. After I type the desired name, I press the "VALIDATE NAME" button but as you can see, the alert message displays the previous name, not the new one. Only when I click on the room name again the "nameTag" variable refreshes and takes the new value. My question is how do I get the value after I finished typing the desired name?

Below is the demo:

$("#editButton").click(function (){
		    var idTag;
		    var nameTag;
		    alert("DoubleClick the room you want to rename")
		    $(".roomClass").click(function (){
		        $(this).attr('contenteditable', 'true');
		        idTag = $(this).attr("data-room-id");
		        nameTag = $(this).text();
		    })
		    $("#confirmButton").click(function () {
		        PostData(idTag, nameTag);
		    })
		})


function PostData(idTag, nameTag) {
        alert(nameTag + ' with id: ' + idTag + ' was renamed!');
}

<html>
<head>
	<script src=".3.1/jquery.min.js"></script>
</head>
<body>
	 <div class="vertical-menu">
        <h3>ROOM LIST:</h3>
<button id="editButton">EDIT ROOM NAME</button><br>
        <a id="content11" class="roomClass" contenteditable="false" data-room-id="0" style="cursor: pointer;">ROOM1</a><br>
        <a id="content10" class="roomClass" contenteditable="false" data-room-id="9" style="cursor: pointer;">ROOM2</a><br>
        <a id="content9" class="roomClass" contenteditable="false" data-room-id="8" style="cursor: pointer;">ROOM3</a><br>
        <br><br>
        
        <button id="confirmButton">VALIDATE NAME</button>	
        
 
</body>
</html>

Below is the demo:

$("#editButton").click(function (){
		    var idTag;
		    var nameTag;
		    alert("DoubleClick the room you want to rename")
		    $(".roomClass").click(function (){
		        $(this).attr('contenteditable', 'true');
		        idTag = $(this).attr("data-room-id");
		        nameTag = $(this).text();
		    })
		    $("#confirmButton").click(function () {
		        PostData(idTag, nameTag);
		    })
		})


function PostData(idTag, nameTag) {
        alert(nameTag + ' with id: ' + idTag + ' was renamed!');
}

<html>
<head>
	<script src="https://ajax.googleapis./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
	 <div class="vertical-menu">
        <h3>ROOM LIST:</h3>
<button id="editButton">EDIT ROOM NAME</button><br>
        <a id="content11" class="roomClass" contenteditable="false" data-room-id="0" style="cursor: pointer;">ROOM1</a><br>
        <a id="content10" class="roomClass" contenteditable="false" data-room-id="9" style="cursor: pointer;">ROOM2</a><br>
        <a id="content9" class="roomClass" contenteditable="false" data-room-id="8" style="cursor: pointer;">ROOM3</a><br>
        <br><br>
        
        <button id="confirmButton">VALIDATE NAME</button>	
        
 
</body>
</html>

Share Improve this question edited Sep 10, 2018 at 11:18 Andrew_Lvov 4,6682 gold badges28 silver badges31 bronze badges asked Sep 10, 2018 at 10:00 mecnism 1952 silver badges16 bronze badges

Add a ment |

3 Answers 3

Sorted by: Reset to default 6

you can get value simply by using .text() jquery function like :

var room8Value = $("[data-room-id=8]").text();

you can check this jsfiddle example

$("#editButton").click(function (){
    var idTag;
    var nameTag;
    alert("DoubleClick the room you want to rename")
    $(".roomClass").click(function (){
        $(this).attr('contenteditable', 'true');
        idTag = $(this).attr("data-room-id");
        nameTag = $(this).text();
    })
    $("#confirmButton").click(function () {
        PostData(idTag, nameTag);
    })
});


function PostData(idTag, nameTag) {
        alert(nameTag + ' with id: ' + idTag + ' was renamed! to :' + $("[data-room-id="+idTag+"]").text());
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
	<script src="https://ajax.googleapis./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
	 <div class="vertical-menu">
        <h3>ROOM LIST:</h3>
<button id="editButton">EDIT ROOM NAME</button><br>
        <a id="content11" class="roomClass" contenteditable="false" data-room-id="0" style="cursor: pointer;">ROOM1</a><br>
        <a id="content10" class="roomClass" contenteditable="false" data-room-id="9" style="cursor: pointer;">ROOM2</a><br>
        <a id="content9" class="roomClass" contenteditable="false" data-room-id="8" style="cursor: pointer;">ROOM3</a><br>
        <br><br>
        
        <button id="confirmButton">VALIDATE NAME</button>	
        
 
</body>
</html>

Use var idTag; and var nameTag; as public variable, you had applied this variable inside $("#editButton").click() apply them outside

Please check below:

var idTag;
var nameTag;

$("#editButton").click(function (){
    alert("DoubleClick the room you want to rename")
	$(".roomClass").click(function (){
	    $(this).attr('contenteditable', 'true');
		idTag = $(this).attr("data-room-id");
		nameTag = $(this).text();
    })
	
    $("#confirmButton").click(function () {
	    PostData(idTag, nameTag);
	})
})

function PostData(idTag, nameTag) {
    alert(nameTag + ' with id: ' + idTag + ' was renamed!');
}

<html>
<head>
	<script src="https://ajax.googleapis./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
    <div class="vertical-menu">
        <h3>ROOM LIST:</h3>
        <button id="editButton">EDIT ROOM NAME</button><br>
        <a id="content11" class="roomClass" contenteditable="false" data-room-id="0" style="cursor: pointer;">ROOM1</a><br>
        <a id="content10" class="roomClass" contenteditable="false" data-room-id="9" style="cursor: pointer;">ROOM2</a><br>
        <a id="content9" class="roomClass" contenteditable="false" data-room-id="8" style="cursor: pointer;">ROOM3</a><br>
        <br><br>
        
        <button id="confirmButton">VALIDATE NAME</button>
    </div>
</body>
</html>

Try the below js code..

	$("#editButton").click(function (){
		    var idTag;
		    var nameTag;
		    var roomId;
		    alert("DoubleClick the room you want to rename")
		    $(".roomClass").click(function (){
		        $(this).attr('contenteditable', 'true');
		        idTag = $(this).attr("data-room-id");
		        roomId = $(this).attr("id");
		    });
		    $("#confirmButton").click(function () {
		    	nameTag = $('#'+roomId).text();
		        PostData(idTag, nameTag);
		    });
		})


function PostData(idTag, nameTag) {
        alert(nameTag + ' with id: ' + idTag + ' was renamed!');
}

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Update HTML content after click - Stack Overflow

3 Answers 3

与本文相关的文章

评论列表(0)