感谢您的支持,我会继续努力的!
打开微信扫一扫,即可进行扫码打赏哦
点我查看本站打赏源码!
Powered by RUNCODEX.COM,学的不仅是技术,更是梦想!!!
<!DOCTYPE html>
<html>
<head>
<title>Players</title>
<link rel="stylesheet" href="Codelobster6.css" type="text/css">
</head>
<body>
<div>
<p> Apple </p>
<p> Pear </p>
<p> HuangWen </p>
<p> HanJunLan </p>
</div>
<button onclick="createPlayer()">Add player</button>
<button onclick="createMultiplePlayers()">Create players</button>
<button onclick="removeAllPlayers()">Remove all players</button>
</body>
<script src="Codelobster7.js"></script>
</html>
xxxxxxxxxx
var p = document.querySelector('p');
p.addEventListener('click',updateName);
var allP=document.querySelectorAll('p');
for(i = 0; i < allP.length; i++){
allP[i].addEventListener('click',updateName);
}
function updateName(){
let name = prompt('Enter a new name');
this.textContent = name;
function createPlayer(){
let p2=document.createElement("p");
p2.textContent=name;
let div=document.querySelector('div');
div.appendChild(p2);
p2.addEventListener('click',updateName);
function removeAllPlayers(){
//get the div tagg
//empty it by settings innerHTML to ''
div.innerHTML='';
function createMultiplePlayers(){
p{
font-family: :'arial';
letter-spacing: 2px;
text-transform: :uppercase;
text-align: :center;
border: 2px solid black;
background: grey;
color: orange;
box-shadow: 1px 1px 2px grey;
border-radius: 10px;
padding: 30px 20px;
display: inline-block;
cursor: pointer;
p:hover{
background-color:lightgrey;
color:white;