Question

我试图创建一个显示文本的按钮，另一个按钮删除它，这是我到目前为止所做的。

当我点击点击我！按钮文字显示，但当我点击隐藏按钮并且我不知道原因时它不会消失。

＆＃13;

<div class="butt">
<button type="button" onclick="myFunction()">Click Me!</button>
<button type="button" onclick="myFunctionHide">Hide</button>
</div>
<p id="test"></p>

<script = "text/javascript">
function myFunction() {
document.getElementById("test").innerHTML = "Andyduly";
}
</script>
<script = "text/javascript">
function myFunctionHide {
document.getElementById("test").innerHTML.object.style.display == "none";
}

</script>

＆＃13;

Answer 1

代码中的2个问题

<button type="button" onclick="myFunctionHide">Hide</button>

应该是

<button type="button" onclick="myFunctionHide()">Hide</button>

function myFunctionHide {
   document.getElementById("test").innerHTML.object.style.display == "none";
}

应该是

    function myFunctionHide() {
       document.getElementById("test").style.display = "none";
    }

style是element的属性，而不是innerHTML.object

的属性

另外，最好避免使用内联事件处理程序，这样可以使HTML更加清晰，同时也可以保持关注点的分离，从而使代码更易于维护。

<强> HTML

<div class="butt">
    <button type="button" id="btn_click">Click Me!</button>
    <button type="button" id="btn_hide">Hide</button>
</div>
<p id="test"></p>

<强> JS

var elemTest = document.getElementById('test');

document.getElementById('btn_click').addEventListener('click', function () {
    elemTest.innerHTML = "Andyduly";
});

document.getElementById('btn_hide').addEventListener('click', function () {
    elemTest.style.display = "none";
});

您可以将整个代码包含在单个脚本标记中。

<强> Check Fiddle

Answer 2

请参阅此fiddle

要使用Javscript隐藏元素，请尝试类似

的内容

 document.getElementById('test').style.display = 'none';

请将<script>替换为

<script = "text/javascript">
    function myFunctionHide() {
    document.getElementById("test").style.display = 'none';
}
</script>

您的Javascript和HTML中存在许多错误

已编辑的Javascript

function myFunction() {
    document.getElementById("test").innerHTML = "Andyduly";
}

function myFunctionHide() {
    document.getElementById("test").style.display = "none";
}

您忘记在Javascript中将()添加到myFunctionHide。

此外，已编辑的HTML 将是

<div class="butt">
    <button type="button" onclick="myFunction()">Click Me!</button>
    <button type="button" onclick="myFunctionHide()">Hide</button>
</div>
<p id="test"></p>

Answer 3

好吧，首先你的语法看起来不对，应该是

function myFunctionHide() {
   document.getElementById('test').style.display = 'none';
}

Answer 4

尝试这个，我清除＆＃34;测试＆＃34; P标签。

＆＃13;

<div class="butt">
<button type="button" onclick="myFunction()">Click Me!</button>
<button type="button" onclick="myFunctionHide()">Hide</button>
</div>
<p id="test"></p>

<script = "text/javascript">
function myFunction() {
document.getElementById("test").innerHTML = "Andyduly";
}
</script>
<script = "text/javascript">
function myFunctionHide() {
document.getElementById("test").innerHTML = "";
}

</script>

＆＃13;

如何在Javascript中隐藏按钮？

4 个答案:

请参阅此fiddle