I am attempting to have a user input their name and the name then prints in other places in the book. I was able to get this to work using Sigil and HTML/JS but I can't seem to get PubCoder to like what I'm doing. I'm assuming I'm inputting the code incorrectly and perhaps in the wrong places (smart objects vs page/project code). Any guidance would be very much appreciated. I am a university student with limited knowledge of HTML/JS but my capstone project is unfortunately centered around it. Here are the basics of what I had in Sigil:
HTML:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops">
<head>
<meta charset="UTF-8"/>
<title>BE SMART with YOUR HEART</title>
<link rel="stylesheet" href="../Styles/styles.css" type="text/css"/>
<script defer="" src="../Scripts/script.js"></script>
</head>
<body>
<div class="header">
Enter your name: <input type="text" id="nameInput"/>
</div>
<div class="content">
<h1>BE SMART with YOUR HEART</h1>
<p>My name is Benjamin. Everybody calls me Ben. You can call me Ben too because you are my new friend, <span class="namePlaceholder"></span>. I play on the Dizzy Dingers baseball team. It is a nice day outside for our big ball game. There are a lot of people here today. It is like the whole town is here to watch us play.</p>
<p>Kendra is always on the move. She likes to swim and run track. Some kids can do that but others will have to be careful. It is important to know that it is okay to be careful because all kids are special, <span class="namePlaceholder"></span>.</p>
</div>
</body>
</html>JS:
document.addEventListener('DOMContentLoaded', function() {
const nameInput = document.getElementById('nameInput');
const namePlaceholders = document.querySelectorAll('.namePlaceholder');
if (nameInput) {
nameInput.addEventListener('input', function() {
const name = nameInput.value;
namePlaceholders.forEach(placeholder => {
placeholder.textContent = name;
});
});
}
});