Last updated
Was this helpful?
Was this helpful?
<!DOCTYPE html>
<html>
<head>
<style>
p {
/* set the font family, size, and style */
font-family: "Helvetica Neue", Helvetica, sans-serif;
letter-spacing: 1px;
text-transform: uppercase;
/* set the border, background, color, and box shadow */
border: 2px solid rgba(0, 0, 200, 0.6);
background: rgba(0, 0, 200, 0.6);
color: rgba(255, 255, 255, 1);
box-shadow: 1px 1px 2px rgba(0, 0, 200, 0.4);
/* set the border radius and padding */
border-radius: 10px;
padding: 3px 10px;
/* set the display to inline-block and cursor to pointer */
display: inline-block;
cursor: pointer;
}
</style>
</head>
<body>
<!-- add an ID attribute to the <p> element -->
<p id="player-name">Player 1: Chris</p>
<script>
// get a reference to the <p> element using its ID
const para = document.getElementById("player-name");
// add a click event listener to the <p> element
para.addEventListener("click", updateName);
function updateName() {
// prompt the user to enter a new name
const name = prompt("Enter a new name");
// update the text content of the <p> element
para.textContent = `Player 1: ${name}`;
};
</script>
</body>
</html><!-- add an ID attribute to the <p> element -->
<p id="player-name">Player 1: Chris</p>p {
/* set the font family, size, and style */
font-family: "Helvetica Neue", Helvetica, sans-serif;
letter-spacing: 1px;
text-transform: uppercase;
/* set the border, background, color, and box shadow */
border: 2px solid rgba(0, 0, 200, 0.6);
background: rgba(0, 0, 200, 0.6);
color: rgba(255, 255, 255, 1);
box-shadow: 1px 1px 2px rgba(0, 0, 200, 0.4);
/* set the border radius and padding */
border-radius: 10px;
padding: 3px 10px;
/* set the display to inline-block and cursor to pointer */
display: inline-block;
cursor: pointer;
}// get a reference to the <p> element using its ID
const para = document.getElementById("player-name");
// add a click event listener to the <p> element
para.addEventListener("click", updateName);
function updateName()
{
// prompt the user to enter a new name
const name = prompt("Enter a new name");
// update the text content of the <p> element
para.textContent = `Player 1: ${name}`;
};