Question

我试图根据点击的按钮显示表单。也就是说，在单击第一个按钮时，会显示另外两个按钮。但是，生成的新按钮的行为类似于虚拟按钮（onClick事件不起作用）。

如何解决此错误？有没有其他替代方法可以实现相同的功能？

我有以下代码：

<html>
<head>
    <title>Frequently Asked Questions</title>
    <link rel="stylesheet" type="text/css" href="CSSfiles/faqCSS.css">  
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script >
        function addContent(divName, content) {
            document.getElementById(divName).innerHTML = content;
        }
    </script>
</head>
<body>
    <p>Put banner and logo on top; Put footer later </p>
    <div class="intro">
        Looking for help? We provide you information about what can be done when in trouble. Hope you find it helpful!
    </div>


    <form name="myForm" class="select">
        <input type="button" value="ND" class="select-button" onClick="addContent('myDiv', document.myForm1.ND.value);"><br>
        <input type="button" value="E" class="select-button" onClick="addContent('myDiv', document.myForm1.E.value);">
    </form>

    <form name="myForm1" class="select">
        <textarea   name="ND">
            <input type="button" value="Earthquakes" class="trial" onclick="addContent('yourDiv', document.myForm2.HW.value);"/><br>
        </textarea>
        <textarea  name="E"><u>E</u></textarea>
    </form>

    <form name="myForm2" class="select">
        <textarea   name="HW">
            <u>Hello world!</u>
        </textarea>
    </form>

    <br><br>

    <div id="myDiv"></div>
    <div id="yourDiv"></div>
</body>
</html>

Answer 1

我不清楚如何将这些按钮添加到您的DOM中（您可以发布该代码吗？）。

但是，请说您的按钮的ID为“MyButton1”，

 <button id="MyButton1">Hello</button>

然后如果你用jQuery执行此操作，你的代码需要通过挂钩已经存在并将包含你的按钮的对象delegate点击它;例如body元素：

// This is registered before MyButton1 is created.

$('body').on('click', '#MyButton1', function(event) {
    alert("Hello, I'm button 1");
}

使用普通javascript ，后，您已创建新内容（以便getElementById可以找到该按钮），您需要绑定onclick事件：

document.getElementById('MyButton1').onclick = function() {
    alert("Hello again");
}

或（旧版IE不支持）

document.getElementById('MyButton1').addEventListener("click",
   function() {
       alert("Still me");
   });

您可以在这里找到代码为a Javascript fiddle的代码：javascript方法。

Answer 2

最初隐藏所有表单。把它们放在所需的部门。每个按钮的Onclick只显示/隐藏预期的形式..

这可以帮到你。

onClick事件不适用于按钮

2 个答案: