Javascript create button and trigger onclick function on HTML

Question

I'm facing an issue , where the javascript is responsible to create the button then show it on HTML( Pop up box ).

Once it's created, i want the user to freely click a button to close it. The workaround is by setting the modal.style.style=display .

In the HTML:

<div id="myModal" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
  <div class='modal-header'>
  <span class='close'>&times;</span>
<div id ="sub" >

  </div>

</div>

I have a function to create a modal box upon getting success variable, i'm appending to the id sub.

div.innerHTML = 
"<div id=''><span class='close'><input type='image' id='vicious' onclick='clear()' style='width:100%;' border='0' src='images/DUK.png' ></span></div>"

When it shows on HTML, i want to trigger an onclick function to close this modal box. Because everything is created by the javascript, so I think the issue it's not triggering any line.

I've tried creating an onclick function to trigger

var modal = document.getElementById('myModal');
    function clear(){

        modal.style.display = "none";

    }

I've also tried

var modal = document.getElementById('myModal');
    var vicious = document.getElementById("vicious");

    vicious.onclick = function() {

        modal.style.display = "none";

    }

I'm out of idea, could someone guide me? Thanks in advance.

JSBIN: http://jsbin.com/rusapudodo/edit?html,js,output

I don't see myModal used anywhere! Check if you are setting the id of modal div properly. — Sudhansu Choudhary
– Sudhansu Choudhary, Commented Aug 2, 2017 at 14:42

Sudhansu Choudhary · Accepted Answer · 2017-08-02 15:25:26Z

1

As you are using jQuery, you can achieve hiding of modal as per below steps,

Remove binding of click event, onclick='clear()'. This is not needed.

Bind listener to the element with id as vicious using,

$('#vicious').click(function() {
    $('#myModal').modal('hide');
});

Alternatively try the following approach,

$("#vicious").on("click", function(e){
     $("#modal").modal("hide");
     e.stopPropagation();
});

Stop the event from bubbling up.

If you want to use vanilla javaScript onlt then include the following code after you set the inner html,

var btn = document.getElementById("vicious");
btn.onclick = function() {
    alert();
    modal.style.display = "none";
}

edited Aug 2, 2017 at 15:25

answered Aug 2, 2017 at 14:59

Sudhansu Choudhary

3,3903 gold badges21 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

11 Comments

FreedomPride Over a year ago

no luck, cause innerhtml failed to bind event. I've added this in the html page also no luck because my javascript is separate.

Sudhansu Choudhary Over a year ago

Add the piece of code in the javaScript file that you have kept separately

FreedomPride Over a year ago

added a jsbin, if you click the small x button on top it will clear everything , but submit button with no image doesn't do so that's my issue.

Sudhansu Choudhary Over a year ago

okay.. let me see.... Although I don't see you using the piece of code that I provided.

FreedomPride Over a year ago

this is the original one, i've tried your code putting at the below of the innerhtml, clicking the button never trigger anything . even at the html page.

|

Alexandre Thyvador · Accepted Answer · 2017-08-02 14:49:05Z

0

You can try something like that :

<div id="myModal" class="modal">

    <!-- Modal content -->
    <div class="modal-content">
        <div class='modal-header'>
            <span class='close' onclick="close()">&times;</span>
            <div id="sub">

            </div>

        </div>

    </div>
</div>

<script>
    function close(){
        document.getElementById('myModal').style.display = 'none';
    }
</script>

answered Aug 2, 2017 at 14:49

Alexandre Thyvador

3641 silver badge10 bronze badges

4 Comments

FreedomPride Over a year ago

It wouldn't work, i need to give image the specific id to close it not the span.

Alexandre Thyvador Over a year ago

Well if you want to close the modal, you don't need the id of the img, simply add : onclick="close()" in your img.

FreedomPride Over a year ago

added a jsbin to my post to know more info

Alexandre Thyvador Over a year ago

Well you lost me now, maybe I did not get what your are trying to do. Why are you using an input to close your modal ?

MaanooAk · Accepted Answer · 2017-08-02 14:59:29Z

0

You need to move the selector inside the function:

function clear() {
    var modal = document.getElementById('myModal');
    modal.style.display = "none";
}

EDIT: using your second technic:

div.innerHTML = ...;
var vicious = document.getElementById("vicious");
vicious.onclick = clear;

edited Aug 2, 2017 at 14:59

answered Aug 2, 2017 at 14:50

MaanooAk

2,46619 silver badges29 bronze badges

2 Comments

FreedomPride Over a year ago

the second method not working, added a jsbin to my post

MaanooAk Over a year ago

By the way nice use of the ×, also tell me if my jsbin is working for you

General Grievance · Accepted Answer · 2022-09-16 12:18:42Z

0

For disabling button, you can use the below code

$("#button0000000001").find("button").attr("disabled", true);

edited Sep 16, 2022 at 12:18

General Grievance

5,12039 gold badges39 silver badges60 bronze badges

answered Sep 13, 2022 at 4:49

Alireza Mirzaei

12 bronze badges

1 Comment

General Grievance Over a year ago

Does the question ask about disabling the button?

Collectives™ on Stack Overflow

Javascript create button and trigger onclick function on HTML

4 Answers 4

11 Comments

4 Comments

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

11 Comments

4 Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related