javascript - 如何设置一个弹出窗口，根据我在 javascript 中的输入显示不同的内容

Question

我是 JavaScript 初学者。现在我想根据我的输入设置一个点击弹出窗口。我的代码是:

<div class="popup" onclick="myFunction()"> Equation
    <script scr="pop.js" type="text/javascript"></script>
</div>

pop.js 代码:

function myFunction(){
    var o=getValuesFromForm();
    var ans=o.Group;
    var smn="";
    if (ans=='a'){
        smn += '<span class="poptext" id="myPopup" style="front-size: 80%">I am in group A</span>';
    }
    else {
       smn += ' <span class="poptext" id="myPopup" style="front-size: 80%">I am in Group B</span>';
    }
    $('#myPopup').html(smn);
    $('#myPopup').classList.toggle("show");
}

Answer 1

一些问题:

• jQuery 不公开 classList 方法。只需使用 jQuery .show() 方法
• 存在一些循环推理:您创建包含 #myPopup 元素的 HTML，但随后从当前页面中选择具有该 ID 的元素并尝试将其 HTML 设置为该元素。您应该决定哪个是#myPopup...这是一个先有鸡还是先有蛋的问题。我建议您在原始 HTML 中包含 #myPopup 元素，并且不要将该 ID 用于动态添加的 span 元素。
• front-size 可能应该是 font-size。

以下是如何以更 jQuery 风格完成此操作:

// Stub for the function you did not include:
function getValuesFromForm() {
    return Object.fromEntries((new FormData(document.forms[0])).entries());
}

function myFunction(){
    var o = getValuesFromForm();
    var ans = o.Group;
    var smn = $('<span>').addClass("poptext").css("font-size", "80%")
                         .text("I am in group " + ans.toUpperCase());
    $('#myPopup').empty().append(smn).show();
}

#myPopup {
    position: absolute;
    width: 300px;
    height: 50px;
    margin: 50px;
    border: 2px outset;
    display: none;
    text-align: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
    <select name="Group">
        <option>a</option>
        <option>b</option>
    </select>
</form>

<button class="popup" onclick="myFunction()">Equation</button>

<div id="myPopup"></div>