我正在用 javascript 开发 duolingo 类型句子练习。我已经实现了，但还需要改进
我使用以下代码来开发句子语法练习。当我单击按钮时，应该保持订单。我希望单击按钮时它应该隐藏，但单击顶部按钮后再次显示。
如果有空格，则将句子移至左侧。如果再次单击单词，也会再次显示按钮。是否应该只使用在顶部显示的按钮也在底部显示？
<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
像这样的事情怎么样？<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
我使用JavaScript的appendChild和remove函数实现了它。<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>
随时随地看视频慕课网APP
相关分类
Html5