javascript - Update HTML content after click - Stack Overflow

IT技术

更新时间：2025-04-260

admin管理员组
文章数量:1434929

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>

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="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!');
}

本文标签： javascriptUpdate HTML content after clickStack Overflow

版权声明：本文标题：javascript - Update HTML content after click - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人，转载请联系作者并注明出处：http://www.betaflare.com/web/1745623396a2666822.html，本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。

编程频道|软件玩家 - 软件改变生活！

javascript - Update HTML content after click - Stack Overflow

3 Answers 3

更多相关文章