Question

单击按钮后，我想打开一个HTML弹出窗口。下面是我正在使用的代码，但无法正常工作。我认为将值传递给span标签的方式存在问题：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* Popup container - can be anything you want */
.popup {
    position: relative;
    display: inline-block;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* The actual popup */
.popup .popuptext {
    visibility: hidden;
    width: 160px;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 8px 0;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -80px;
}

/* Popup arrow */
.popup .popuptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}

/* Toggle this class - hide and show the popup */
.popup .show {
    visibility: visible;
    -webkit-animation: fadeIn 1s;
    animation: fadeIn 1s;
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
    from {opacity: 0;} 
    to {opacity: 1;}
}

@keyframes fadeIn {
    from {opacity: 0;}
    to {opacity:1 ;}
}
</style>
</head>
<body style="text-align:center">

<h2>Popup</h2>
<button onclick="myFunction('Harry Potter','Wizard')">Try it</button>
<div class="popup" >
  <span class="popuptext" id="myPopup">Ankit</span>
</div>
<p id="demo"></p>

<script>
// When the user clicks on div, open the popup
document.getElementById("myPopup").innerHTML= "Welcome " + name + ", the " + job + ".";
function myFunction(name,job) {
document.getElementById("myPopup").innerHTML =
    "Welcome " + name + ", the " + job + ".";
    var popup =document.getElementById("myPopup");
    popup.classList.toggle("show");
}
</script>

</body>
</html>

如果我在Span标记中对值进行硬编码，则代码可以正常工作并显示该值，但不接受函数中传递的值。

Answer 1

尝试使用此代码，我自己进行了尝试，并成功了

<div class="popup" onclick="myFunction('some text')">Click me to toggle the popup!
<span class="popuptext" id="myPopup"></span>
</div>
<script>
// When the user clicks on div, open the popup
function myFunction(value) {
    var popup = document.getElementById("myPopup");
    popup.innerText = value;
    popup.classList.toggle("show");
}
</script>

Answer 2

不确定要输出的内容是什么，但是正确的代码编写方法如下：

<h2>Popup</h2>

<div class="popup" onclick="myFunction('Harry Potter','Wizard')">
  <button> Try it </button>
  <span class="popuptext" id="myPopup">Ankit </span>
</div>

<p id="demo"></p>

<script>
// When the user clicks on div, open the popup
document.getElementById("myPopup").innerHTML= "Welcome " + name + ", the " + job + ".";
function myFunction(name,job) {

    var popup =document.getElementById("myPopup");
    popup.innerHTML = "Welcome " + name + ", the " + job + ".";
    popup.classList.toggle("show"); 
}
</script>

关于此代码，

在单击“尝试”按钮时，将弹出一个“欢迎向导的哈利·波特”。原因是您将值“ Harry Potter”作为名称，将“ Wizard”作为作业 onclick="myFunction('Harry Potter','Wizard')"

现在，在函数中，您声明了一个名为popup的变量，该变量存储id为“ myPopup”的值，在这种情况下，该值现在为“ Ankit”

在下一行中，我们将值更改为“ Welcome” +名称+“，” + job +“。”，将行更改为“ Welcome Harry Potter，the Wizard”。值“ Ankit”丢失。

popup.classList.toggle("show");仅创建弹出窗口。

如果您希望在弹出窗口中也包含“ Ankit”，则不妨尝试以下代码段：

<div class="popup" onclick="myFunction('Harry Potter','Wizard')">
  <button> Try it </button>
  <span class="popuptext" id="myPopup"> Hi, I am Ankit. </span>
</div>

<p id="demo"></p>

<script>
// When the user clicks on div, open the popup
document.getElementById("myPopup").innerHTML= "Welcome " + name + ", the " + job + ".";
function myFunction(name,job) {

    var popup =document.getElementById("myPopup");
    popup.innerHTML = popup.innerHTML + " Welcome " + name + ", the " + job + ".";
    popup.classList.toggle("show"); 
}
</script>

弹出窗口现在将显示为“嗨，我是Ankit。欢迎向导中的哈利·波特”。

希望这会有所帮助：）

单击按钮上的HTML弹出框

2 个答案: