Problem in bringing value to HTML

Asked

Viewed 42 times

0

I own this HTML and Javascript:

    var pessoa = new Person("imgs/avatarVillainInGlasses.jpg", "Rodrigo", "Gama", 29, "Masculino", "programming");

    var photoImage = document.querySelector(".photoImage");
    var name = document.querySelector(".personName");
    var age = document.querySelector(".personAge");
    var gender = document.querySelector(".personGender");
    var bio = document.querySelector(".personBio");

    photoImage.src = pessoa.photoPath;
    name.innerHTML = "Nome: " + pessoa.name.last.toUpperCase() + ", " + pessoa.name.first;
    age.innerHTML = "Idade: " + pessoa.age;
    gender.innerHTML = "Gênero: " + pessoa.gender;
    bio.innerHTML = "Descrição: " + pessoa.bio();

    function Person(photoPath, fname, lname, age, gender, interests) {
        this.photoPath = photoPath;

        this.name = {
            "first": fname,
            "last": lname
        }

        this.age = age;
        this.gender = gender;
        this.interests = interests;

        this.bio = function() {
            return this.name.first + " " + this.name.last + " is " + this.age + " years old. They like " + this.interests + ".";
        }

    }
    <!DOCTYPE html>
    <html lang="ptbr">
    <head>
        <title></title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="../mainCore/css/style.css" rel="stylesheet">
        <link href="css/style.css" rel="stylesheet">
    </head>
    <body>
        <div class="person">
            <div class="personPhoto">
                <img class="photoImage" src="" width="180px" height="150px">
            </div>

            <div class="personInfo">

                <p class="personName">Name: </p>
                
                <p class="personAge">Age: </p>
                <p class="personGender">Gender: </p>
                <p class="personBio">Bio: </p>
            </div>
            
        </div>        
    </body>

    <script src="js/app.js"></script>

    </html>

For some reason I fail to understand, the var name, receiving the class element personName cannot receive the string concatenated below. All other fields are receiving values normally.

It’s just a study project, it’s not gonna turn into anything but experience to deal with this kind of situation in the future.

javascript html

  • tested and is working perfectly: https://jsfiddle.net/qpo1cmyg/ is not missing the image in your html?

  • The <script> must be inside the </body> and var pessoa = new Person() must be after function Person. You already tested that?

  • Ricardo Punctual, no, because the image is appearing to me when I test the page. The only element that is not populated is "personName"; EDIT: In fact, jsFiddle is working normally, but when I test vsCode, this error is occurring. EDIT2: I just tested in Firefox and Chrome. In both I have the same problem.

  • Sergio, thanks for the tips, but they had no effect;

  • Where are you trying to run this code? I tried playing in Jsfiddle and it was no problem, so I tried playing in Stack Overflow and it was a problem. For some reason the variable with the name name causes this strange bug. If you give another name to this variable works normally, but this error doesn’t make much sense, so much so that it only occurs here in the OS.

  • user140828 I am running the code in vsCode EDIT: In fact, when changing the variable name, it started working;

Show 1 more comment

1 answer

1


This problem is being caused because of the name variable name.

name is a property that all DOM elements possess, and when you declare a variable in the global scope, it becomes a property of the window.

When using the global variable name, you are accessing the property name of window, but the property name has one particularity: it has a setter - as DOM elements can only store strings in their property name, everything that property name received is converted to string.

This is the source of the problem, when assigning a value to a global name variable name, this value is converted to string.

Browser other questions tagged javascript html

You are not signed in. Login or sign up in order to post.