Question

使用代码1.我在按下单选按钮时设置了限制，只能使用一次。这个问题是如果它在no和yes之间切换几次，它只能工作一次。代码2没有设置约束导致单选按钮被按下几次，但可以按几次是或否，导致多个输入。有没有一种方法可以循环这个或使用if语句来使它可以出现和消失多次，而不是超过1个输入框？我试图将它保留到JavaScript和DOM中。当我尝试从给定元素创建if语句以确保其有效时，我得到“[object HTMLInputElement]”。

代码1，限制单选按钮。

function myFunction() {
    var label = document.createElement("label");
    label.innerHTML = "<br>Shipment Cost : $";

    var x = document.createElement("INPUT");
    x.setAttribute("type", "text");
    label.setAttribute("id", "idForLabel");
    x.setAttribute("id", "idForInput");


    var sp2 = document.getElementById("emailP");
    var parentDiv = sp2.parentNode;
    parentDiv.insertBefore(x, sp2);
    parentDiv.insertBefore(label, x);
    label.setAttribute("id", "idForLabel");
    x.setAttribute("id", "idForInput");

    alert("Added Text Box");

}
function myFunction2() {
    alert("Removed Textbox and Input");
    anchor = document.getElementById("idForLabel");
    anchor.parentNode.removeChild(anchor);
    anchor2 = document.getElementById("idForInput");
    anchor2.parentNode.removeChild(anchor2);
}

        </script>
<form action="#" method="post" onsubmit="alert('Your form has been submitted.'); return false;">

  <p class="boldParagraph" id="tip3P">Shipping costs are free:</p>
  <input type="radio" name="tip3" value="3" onclick="myFunction2()" />Yes
  <input type="radio" name="tip3" value="4" onclick="myFunction(); this.onclick=null;" />No

  <p class="boldParagraph" id="emailP">Email of seller:</p>
  <input class="averageTextBox" type="email" id="emailAddress" value="" required>

  <br>
  <br>
  <button>Submit</button>

</form>
    </body>
</html>

代码2，带有无限单选按钮操作。

<!DOCTYPE html>
<html>
    <head>        
    </head>
    <body>
        <script>

function myFunction() {
    var label = document.createElement("label");
    label.innerHTML = "<br>Shipment Cost : $";

    var x = document.createElement("INPUT");
    x.setAttribute("type", "text");
    label.setAttribute("id", "idForLabel");
    x.setAttribute("id", "idForInput");


    var sp2 = document.getElementById("emailP");
    var parentDiv = sp2.parentNode;
    parentDiv.insertBefore(x, sp2);
    parentDiv.insertBefore(label, x);
    label.setAttribute("id", "idForLabel");
    x.setAttribute("id", "idForInput");

    alert("Added Text Box");

}
function myFunction2() {
    alert("Removed Textbox and Input");
    anchor = document.getElementById("idForLabel");
    anchor.parentNode.removeChild(anchor);
    anchor2 = document.getElementById("idForInput");
    anchor2.parentNode.removeChild(anchor2);
}

        </script>
<form action="#" method="post" onsubmit="alert('Your form has been submitted.'); return false;">

  <p class="boldParagraph" id="tip3P">Shipping costs are free:</p>
  <input type="radio" name="tip3" value="3" onclick="myFunction2()" />Yes
  <input type="radio" name="tip3" value="4" onclick="myFunction()" />No

  <p class="boldParagraph" id="emailP">Email of seller:</p>
  <input class="averageTextBox" type="email" id="emailAddress" value="" required>

  <br>
  <br>
  <button>Submit</button>

</form>
    </body>
</html>

Answer 1

创建或删除元素时，应检查它们是否（仍然存在）。

您可以使用以下功能尝试“代码2”：

function myFunction() {
    var label = document.getElementById('idForLabel');
    var x = document.getElementById("input");
    if (!label && !x) {
        label = document.createElement("label");
        label.innerHTML = "<br>Shipment Cost : $";
        label.setAttribute("id", "idForLabel");
        x = document.createElement("input");
        x.setAttribute("type", "text");
        x.setAttribute("id", "idForInput");

        var sp2 = document.getElementById("emailP");
        if (sp2) {
            var parentDiv = sp2.parentNode;
            parentDiv.insertBefore(x, sp2);
            parentDiv.insertBefore(label, x);

            alert("Added Text Box");
        }
    }
}

function myFunction2() {
    alert("Removed Textbox and Input");
    anchor = document.getElementById("idForLabel");
    if (anchor) {
        anchor.parentNode.removeChild(anchor);
    }
    anchor2 = document.getElementById("idForInput");
    if (anchor2) {
        anchor2.parentNode.removeChild(anchor2);
    }
}

使用javascript和dom从单选按钮创建输入

1 个答案: