CODEWITHSUNDEEP
javascripthtml
Kaspar
Kaspar

Reputation: 89

How do I change a header of HTML with innerHTML

I'm a beginner in HTML and in JavaScript. I have a simple HTML code:

<!DOCTYPE html>
<html>
<head>
    <title>Blah</title>
</head>
<body>
<div>
    <h3 class="test">Heading</h3>
</div>
</body>
</html>

What I need to do, is that when I click on a heading, it should prompt a question: "Are you sure that you want to change the heading?" And when OK is clicked, it should change the heading to the user entered value. So far I have figured out how to get that popup box working (js file below), but I'm struggling to figure out how to change the heading after I click OK?

<script type="text/javascript">
    var elems = document.getElementsByClassName('test');
    var confirmIt = function (e) {
        if (!confirm('Are you sure?')) e.preventDefault();
     };
    for (var i = 0, l = elems.length; i < l; i++) {
        elems[i].addEventListener('click', confirmIt, false);
    }
</script>

Upvotes: 0

Views: 1518

Answers (1)

imvain2
imvain2

Reputation: 15857

This is a working example using PROMPT instead of confirm.

var elems = document.getElementsByClassName('test');
    var confirmIt = function (e) {
        val = prompt("Are you sure that you want to change the heading");
      if(val != "" && val != null){
        this.textContent  = val;
        }
     };
    for (var i = 0, l = elems.length; i < l; i++) {
        elems[i].addEventListener('click', confirmIt, false);
    }
<!DOCTYPE html>
<html>
<head>
    <title>Blah</title>
</head>
<body>
<div>
    <h3 class="test">Heading</h3>
</div>
</body>
</html>

Upvotes: 1

Related Questions