当我使用Javascript单击链接时需要显示一个div

对于一些不允许我使用alert或任何Js对话框的愚蠢做法，我必须实现以下魔法：

1.创建一个带有链接的div，在本例中，它是一个名为info的div。 2.制作了一个隐形div，这将是我的“弹出窗口”，里面有一些垃圾信息。 3.当我点击链接信息时，不可见的div应该会出现

虽然很简单，甚至相当明显，但我在理解如何让这种事情发生的逻辑方面有点困难。如果它能帮我挽回面子的话，我刚开始编程。就像一个月前，还有HTML CSS，我对整个Js世界都是新手

这是我目前的代码：

<div class="scroll-area" id="lista">
    <div class="box">
        <p>Item #1</p>
        <p class="info"><a href="#" id="lnkInfo">Info</p>
        </a>
        <p class="info"><a href="#">Take</p>
        </a>
    </div>
    <div class="box">
        <p>Item #2</p>
        <p class="info"><a href="#">Info</p>
        </a>
        <p class="info"><a href="#">Take</p>
        </a>
    </div>
</div>

我认为这将是JS的开始：

var elementPopUp = document.getElementById('lnkInfo');

elementoPopUp.addEventListener('click', validate);

function validate() {
    document.getElementById('popUp').className += ' show';
}

---

已更新您的html代码修复程序中存在语法错误，您正在使用

getElementById

获取元素，但您将

弹出窗口设置为类将其更改为id

<div class="scroll-area" id="lista">
    <div class="box"> 
        <p>Item #1</p>
        <p class="info"><a href="#" id="lnkInfo">Info
        </a></p>
        <p class="info"><a href="#">Take
        </a></p>
    </div> 
    <div class="box">
        <p>Item #2</p>
        <p class="info"><a href="#">Info</a></p>

        <p class="info"><a href="#">Take</a></p>
    </div>
</div>
<div id="popup" >
    <ul>
        <li>BLA BLA</li>
        <li>BLA BLA</li>
        <li>BLA BLA</li>
        <li>BLA!</li>
    </ul>
</div>

和javascript

var elementPopUp = document.getElementById('lnkInfo');

elementPopUp.addEventListener('click', validate);

function validate() {
  var d = document.getElementById("popup");

  d.classList.add("show");
}

我相信如果你这样做：

<div class="scroll-area" id="lista">
         <div class="box">
            <p>Item #1</p>
            <p class="info"><a href="#" id="lnkInfo" onclick="validate()">Info</p></a>
            <p class="info"><a href="#">Take</p></a>
        </div>
        <div class="box">
            <p>Item #2</p>
            <p class="info"><a href="#">Info</p></a>
            <p class="info"><a href="#">Take</p></a>
        </div>
              </div>

这应该行得通。
我没有测试它，所以可能有一两个语法错误。
下面是一个如何通过JavaScript影响元素样式的示例：

document.getElementById("clickMe").onclick = function() {
    document.getElementById("showMe").style.display = "block";
}

HTML

<a id="shower" href="">
    show
</a>

<br>
<a id="hider" href="">
    hide
</a>

<br>
<div id="popup" class="hide">Hello</div>

CSS

document.getElementById("shower").addEventListener("click", function (e) {
    var myDiv = document.getElementById("popup");
    myDiv.className = "";
    e.preventDefault();
});

document.getElementById("hider").addEventListener("click", function (e) {
    var myDiv = document.getElementById("popup");
    myDiv.className = "hide";
    e.preventDefault();
});

.hide {
    display: none;
}

下面是我要做的一个简化版本：

HTML：

<a href="#" id="clickMe">clickMe</a>

<div id="showMe">showMe</div>

JavaScript：

document.getElementById("clickMe").onclick = function() {
    document.getElementById("showMe").style.display = "block";
}

这是一个

希望这有帮助；）
 
“对于一些不允许我使用alert或任何Js对话框的愚蠢做法，我必须实现以下神奇效果”
你是说不能使用alert是不好的吗？因为如果你是，我们可能会说。。。出于调试目的，您应该尝试使用
console.log（）
，因为它在如何创建元素方面没有
alert（）
那么突出，您应该从这里开始：这只是一个示例，不要打我；我不需要它来进行调试或诸如此类的事情，我说的是Javascript 101的最佳状态。我只需要它在帖子上所说的内容，当我点击信息链接时，div就会显示出来。你可以使用jQuery吗？：）HTML中没有名为popUp的id。@CodeGrasshopper有趣的是，您只使用了一些打字错误就编写了正确的代码，如：
Elementopup
，您应该在弹出分区中添加一个id。（）我的错误，但我认为它仍然不能解决Js部分。我会去试试你的代码中没有任何带有
popUp
id的元素，请将
class=“popUp”
更改为
id=“popUp”
更正！谢谢，它不起作用，但至少少了一个错误。@CodeGrasshopper check更新版本；）非常感谢你的帮助，有了这个，我将设法隐藏弹出窗口@
.hide {
    display: none;
}

<a href="#" id="clickMe">clickMe</a>

<div id="showMe">showMe</div>

display:none;

document.getElementById("clickMe").onclick = function() {
    document.getElementById("showMe").style.display = "block";
}