我使用以下代碼來開發(fā)句子語法練習(xí)。當(dāng)我單擊按鈕時，應(yīng)該保持訂單。我希望單擊按鈕時它應(yīng)該隱藏，但單擊頂部按鈕后再次顯示。如果有空格，則將句子移至左側(cè)。如果再次單擊單詞，也會再次顯示按鈕。是否應(yīng)該只使用在頂部顯示的按鈕也在底部顯示？<html><head><title></title> </head><body><div id="sen">I am learning JavaScript by developing a simple project.</div><br><div id="dash"></div><br><div id="container"></div><div id="val"></div><script>var sen = document.getElementById("sen").innerHTML;var senTrim = sen.trim();var senArr = senTrim.split(/\s+/);var dashElement = "";for(i=0;i<senArr.length;i++){//alert(senArr[i]); dashElement += "<div onclick='funDiv(this.id);' style='display: inline'" + "id = dashid" + i + ">" + '__ ' + '</div>';}var dash = document.getElementById("dash");dash.innerHTML = dashElement;//var dashID = document.getElementById("dashid0").innerHTML;//var dash1 = document.getElementById("val");//dash1.innerHTML= dashID;var htmlElements = "";for (var i = 0; i < senArr.length; i++) { htmlElements += "<button onclick='fun(this.id);' id = 'btn" + i + "'>" + senArr[i] + '</button>';}var container = document.getElementById("container");container.innerHTML = htmlElements;var ii = 0;function funDiv(clicked){//alert(clicked);var inText = document.getElementById(clicked).innerHTML;document.getElementById(clicked).innerHTML = " __ " ; ii--;}function fun(clicked){//alert(clicked);document.getElementById(clicked).style.display = "none"; document.getElementById("dashid" + ii).innerHTML = document.getElementById(clicked).innerHTML + " ";//document.getElementById(clicked).remove(); ii++;}</script></script></body></html>
2 回答
幕布斯7119047
TA貢獻1794條經(jīng)驗 獲得超8個贊
像這樣的事情怎么樣？
<html>
<body>
<div id="sen">I am learning JavaScript by developing a simple project.</div>
<br>
<div id="dash"></div>
<br>
<div id="container"></div>
<div id="val"></div>
<script>
var sen = document.getElementById("sen").innerHTML;
var senTrim = sen.trim();
var senArr = senTrim.split(/\s+/);
var dashElement = "";
for (var i = 0; i < senArr.length; i++) {
dashElement += `<div onclick='dashClick(this.id);' style='display: inline' id=dash${i}> __ </div>`;
}
var dash = document.getElementById("dash");
dash.innerHTML = dashElement;
var htmlElements = "";
for (var i = 0; i < senArr.length; i++) {
htmlElements += "<button onclick='btnClick(this.id);' id = 'btn" + i + "'>" + senArr[i] + '</button>';
}
var container = document.getElementById("container");
container.innerHTML = htmlElements;
var picked = 0;
function dashClick(clicked) {
const dash = document.getElementById(clicked);
dash.innerHTML = " __ ";
const btn = document.getElementById(`btn${dash.btnId}`);
btn.style.display = "inline";
picked--;
}
function btnClick(clicked) {
var btnId = clicked.replace('btn', '');
document.getElementById(clicked).style.display = "none";
const dash = document.getElementById("dash" + picked)
dash.innerHTML = document.getElementById(clicked).innerHTML + " ";
dash.btnId = btnId;
picked++;
}
</script>
</body>
</html>
繁星coding
TA貢獻1797條經(jīng)驗 獲得超4個贊
我使用JavaScript的appendChild和remove函數(shù)實現(xiàn)了它。
<html>
<body>
<div id="sen">I am learning JavaScript by developing a simple project.</div>
<br>
<div id="dash"></div>
<br>
<div id="container"></div>
<script>
var sen = document.getElementById("sen").innerHTML;
var senTrim = sen.trim();
var senArr = senTrim.split(/\s+/);
var dashElement = "";
var btnElements = "";
for (var i = 0; i < senArr.length; i++) {
btnElements += "<button onclick='btnClick(this.id);' id = 'btn" + i + "'> " + senArr[i] + ' </button>';
}
var container = document.getElementById("container");
container.innerHTML = btnElements;
var picked = 0;
function dashClick(clicked) {
//console.log(clicked);
var buttons = document.getElementsByTagName('button');
var dash = document.getElementById("dash");
dashChild = dash.childNodes;
console.log(document.getElementById(clicked).innerText);
for(i=0;i<senArr.length;i++){
if(document.getElementById(clicked).innerText.trim() == buttons[i].innerText.trim()){
//console.log("Match");
buttons[i].style.opacity = "1";
buttons[i].style.pointerEvents = "auto";
}
}
document.getElementById(clicked).remove(); // remove clicked text
}
// Button click
function btnClick(clicked) {
var dashElement = document.createElement("div");
var text = document.getElementById(clicked).innerText;
dashElement.style.display = "inline";
dashElement.innerHTML = "<div style='display: inline' onclick='dashClick(this.id);' id=" + picked +"> " + text + " </div>"; // add text at top of button
document.getElementById("dash").appendChild(dashElement);
picked++;
document.getElementById(clicked).style.opacity = "0"; //hide button that has been clicked
document.getElementById(clicked).style.pointerEvents = "none";
}
</script>
</body>
</html>
- 2 回答
- 0 關(guān)注
- 184 瀏覽
添加回答
舉報
0/150
提交
取消