我使用以下代码来开发句子语法练习。当我单击按钮时，应该保持订单。我希望单击按钮时它应该隐藏，但单击顶部按钮后再次显示。如果有空格，则将句子移至左侧。如果再次单击单词，也会再次显示按钮。是否应该只使用在顶部显示的按钮也在底部显示？<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条经验 获得超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条经验 获得超4个赞
我使用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>
- 2 回答
- 0 关注
- 68 浏览
添加回答
举报
0/150
提交
取消