Eu possuo esse HTML e 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>
Por algum motivo que me falha a compreensão, a var name
, que recebe o elemento de classe personName
não consegue receber a string concatenada abaixo. Todos os outros campos estão recebendo os valores normalmente.
É apenas um projeto de estudos, não vai virar nada além de experiência para lidar com esse tipo de situação no futuro.
<script>
deve estar dentro do</body>
evar pessoa = new Person()
deve estar depois defunction Person
. Já testaste isso? – Sergio♦ 12/08/19 às 16:23name
causa esse bug estranho. Se você der outro nome para essa variável funciona normalmente, mas esse erro não faz muito sentido, tanto é que ele só ocorre aqui no SO. – user140828 12/08/19 às 16:33