how can I setup a popup that shows different content based on my input in javascript

Question

I am JavaScript beginner. Now I want to set up a click popup based on my input. My code is:

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

code for 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");
}

Welcome to Super User! Please read the tag(s) you included. You are asking an off-topic question. See [On Topic](https://superuser.com/help/on-topic). — DavidPostill, May 01 '19 at 19:34
Your script needs to be above everything in the head, not inside the element thats being clicked. — SpeedOfRound, May 01 '19 at 19:37
jQuery exposes no `classList` property. Just call `.toggle()`. — trincot, May 01 '19 at 19:38
Why @SpeedOfRound? Explain that because it is not really valid. — epascarello, May 01 '19 at 19:38
Looks like you are mixing jQuery and DOM. Error in the console should probably tell you that. — epascarello, May 01 '19 at 19:39
@epascarello aside from just being an excepted best practice, it lets you keep all of your script in one place so you don't have to go searching the page to find where you put things, and can also cause issues with the page loading before your script does, or effecting load time in general https://stackoverflow.com/a/24070373/5471957 — SpeedOfRound, May 01 '19 at 19:51
There is a circular reference there: you create a `span` element with id `myPopup` and then you want that span HTML to be assigned to .... `myPopup`? What did you have in mind? — trincot, May 01 '19 at 19:57
Oh yeah, @trincot is right, I assume you just mean to change the contents of an existing popup to the `poptext` span like you are doing, there's no need for the span to also have an id of `myPopup`. — SpeedOfRound, May 01 '19 at 20:00
Putting it in the head is not a best practice. Having it all in one place is not either. It is a personal opinion. Would be better at the end of the body, but has no impact of the problems with this code. — epascarello, May 01 '19 at 20:13

score 2 · Accepted Answer · answered May 01 '19 at 20:10

Some issues:

jQuery does not expose a classList method. Just use the jQuery .show() method
There is some circular reasoning: You create HTML that includes a #myPopup element, but then you select an element with that id from the current page and try to set its HTML to that. You should decide which is going to be #myPopup... It's a chicken-egg problem. I would suggest that you include in your original HTML the #myPopup element, and don't use that ID for the dynamically added span element.
front-size should probably read font-size.

Here is how you can do it in a more jQuery style:

// 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>

Thank you very much. It works. I have another question: how to make the popup box disappeared if I click the button again, Thanks again. — stephanie, May 02 '19 at 17:41

SpeedOfRound · Answer 2 · 2019-05-01T20:00:45.960

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

$('#myPopup').html(smn);
$('#myPopup').toggleClass("show");
}

As some people have mentioned, you needed to use .toggleClass because you are dealing with a jQuery object and not a DOM element.

how can I setup a popup that shows different content based on my input in javascript

2 Answers2