i have a "Pause" button with a pause_circle_outline materialize icon, and when it clicked i want to change the text to "Resume" and changing the icon to play_circle_outline, but when i try to change the text it changed the text and deletes the icon. here is my code snippet example:
jQuery(document).ready(function($){
$(document.getElementById("pause_btn")).click(function(){
document.getElementById("pause_btn").innerText = "Resume"
});
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script src = "Sources/js/select_require.js"></script>
<script src = "Sources/js/routes.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material Icons" rel="stylesheet">
<body>
<a id="pause_btn">Pause<i >pause_circle_outline</i></a>
</body>
</html>
CodePudding user response:
.innerText
is a sort of "safe" way to access a node's innerHTML
, which in your case includes both the Pause
-text, as well as the <i.../>
tag.
A way to solve this is to add a span
to hold the text. span
s don't do anything, but they help by making the text node editable!
Example:
var playing = true
jQuery(document).ready(function($){
$(document.getElementById("pause_btn")).click(function(){
playing = !playing
// I used querySelector instead of getElementById to get to the span directly.
if(playing) {
document.querySelector("#pause_btn span").innerText = "Pause"
document.querySelector("#pause_btn i").innerText = "pause_circle_outline"
} else {
document.querySelector("#pause_btn span").innerText = "Resume"
document.querySelector("#pause_btn i").innerText = "play_circle_outline"
}
});
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script src = "Sources/js/select_require.js"></script>
<script src = "Sources/js/routes.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material Icons" rel="stylesheet">
<body>
<a id="pause_btn">
<span>Pause</span>
<i >pause_circle_outline</i>
</a>
</body>
</html>
I also added some extra code to make it clickable multiple times!
CodePudding user response:
Both textContent and innerText remove child nodes when altered
Perhaps place your text within a span
with an ID and change its textContent
?
that way your i
tag should remain untouched.
CodePudding user response:
Have you tried putting the icon along with the text to the innerText?
jQuery(document).ready(function($){
$(document.getElementById("pause_btn")).click(function(){
document.getElementById("pause_btn").innerText = 'Resume<i >pause_circle_outline</i>'
});
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script src = "Sources/js/select_require.js"></script>
<script src = "Sources/js/routes.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material Icons" rel="stylesheet">
<body>
<a id="pause_btn">Pause<i >pause_circle_outline</i></a>
</body>
</html>