段落

2017-02-28 104 views
0

段落

/*jshint strict:false */ 
 
document.getElementById("btn_1").addEventListener("click", function() { 
 
    test(this); 
 
}); 
 
document.getElementById("btn_2").addEventListener("click", function() { 
 
    test(this); 
 
}); 
 
document.getElementById("btn_3").addEventListener("click", function() { 
 
    test(this); 
 
}); 
 

 
function test(id) { 
 
    var e = document.getElementById(id); 
 
    var d = document.createElement('p'); 
 
    d.innerHTML = e.innerHTML; 
 
    e.parentNode.insertBefore(d, e); 
 
    e.parentNode.removeChild(e); 
 
}
/* CSS Document */ 
 

 
body { 
 
    background-color: #484848; 
 
} 
 

 
p { 
 
    margin: 2em 2em; 
 
    color: aliceblue; 
 
} 
 

 
button { 
 
    margin: 1em 2em; 
 
    color: ghostwhite; 
 
    background: #677762; 
 
}
<!doctype html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <link rel="stylesheet" href="style.css"> 
 

 
    <title>Line Game</title> 
 
</head> 
 
<p>Als die ersten Menschen auftauchten lehrten wir sie:</p> 
 
<button id="btn_1">Jagen</button> 
 
<button id="btn_2">Fischen</button> 
 
<button id="btn_3">Landwirtschaft</button> 
 
<!--Javascript Time--> 
 
<script src="Javascript.js"></script> 
 

 
<body> 
 
</body> 
 

 
</html>

所以在这里更改按钮元素是我的所有代码。我想在有人点击它们之后将按钮替换为段落。 Buttons中的旧文本应该仍然存在。

对转储问题抱歉,尝试了几个小时,并有点厌倦了试验和错误。

回答

1

变化test(this);test(this.id);

/*jshint strict:false */ 
 
document.getElementById("btn_1").addEventListener("click", function() { 
 
    test(this.id); 
 
}); 
 
document.getElementById("btn_2").addEventListener("click", function() { 
 
    test(this.id); 
 
}); 
 
document.getElementById("btn_3").addEventListener("click", function() { 
 
    test(this.id); 
 
}); 
 

 
function test(id) { 
 
    var e = document.getElementById(id); 
 
    var d = document.createElement('p'); 
 
    d.innerHTML = e.innerHTML; 
 
    e.parentNode.insertBefore(d, e); 
 
    e.parentNode.removeChild(e); 
 
}
/* CSS Document */ 
 

 
body { 
 
    background-color: #484848; 
 
} 
 

 
p { 
 
    margin: 2em 2em; 
 
    color: aliceblue; 
 
} 
 

 
button { 
 
    margin: 1em 2em; 
 
    color: ghostwhite; 
 
    background: #677762; 
 
}
<!doctype html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <link rel="stylesheet" href="style.css"> 
 

 
    <title>Line Game</title> 
 
</head> 
 
<p>Als die ersten Menschen auftauchten lehrten wir sie:</p> 
 
<button id="btn_1">Jagen</button> 
 
<button id="btn_2">Fischen</button> 
 
<button id="btn_3">Landwirtschaft</button> 
 
<!--Javascript Time--> 
 
<script src="Javascript.js"></script> 
 

 
<body> 
 
</body> 
 

 
</html>

0

在这段代码中你把链接元素

test(this); 

,但你需要抛出属性ID

test(this.id);