.innerHTML not always working. Why?

JavaScript
1

for some reason this page does not add the extra

to write more .innerHTML to and writes only ehat was originally coded. can anyone say why?

week1.js

var username

function hello() {

    if (username) {

        alert('hello again,'+ username + '!!');

        } else {

        username = prompt("hello!! what's your name??");

        if(username)

        alert("hello, "+ username + "...nice to meet you!!");

        }

}

function smile() {

    document.getElementById("loading").src = "myFace_smile.png";

    document.getElementById("smileText").innerHTML = "i'm happy again!";

    document.getElementById("text").innerHTML = "Whutz UP?";

    document.getElementById("smiltxt").innerHTML = "Hello there gorgious!";

}

function frown() {

        document.getElementById("loading").src = "myFace.png";

        document.getElementById("smileText").innerHTML = "ooo nooo!";

        document.getElementById("text").innerHTML = "Welcome to first exercise";

        document.getElementById("smiltxt").innerHTML = "What do you meen you feel bad?";

}

stylesheet.css

#text h1 {

    text-align: center;

}

#loading img {

    margin: 0 auto;

    display: block;

    float: none; 

    /*width: 200px; if its a large image, it need a width for align center*/

  }

  p {

      color: red;

      text-decoration: underline;

  }

smile.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="stylesheet.css">

    <script src="week1.js">

      

    </script>

    <title>Exercise 1</title>

</head>

<body>

    <div id="text"><h1>Welcome to first exercise</h1></div>

    <div id="loading">

            <img src="myFace.png" id="smiley" alt="Image 1" onClick="smile()">

</div>

    <a href="#" onClick="hello()">Hello</a>

    <p id="smileText"></p></br>

    <p id="smiltxt"></p>

    <p><a href="javascript:frown();">reset</a></p>

    

    <p><a href="#" onclick="smile();">smile</a></p>

</body>

</html>
2

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

3

And please don’t make duplicate questions.

4

I don’t understand the question, the content of the <p> tags is replaced with different content each time you click on “smile” or “reset”. Can you describe what you want to happen, and what happens instead?

5

I found the error in the code it is that I used the wrong element Id, namely I do not need the loading Id in the HTML and should use the “smiley” id…

6

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.