CODEWITHSUNDEEP
javascripthtmljquerycss
hp2345
hp2345

Reputation: 149

jQuery buttons onclick in jQuery button not working

I have this program where you can create draggable <div></div>'s, the div can then be dragged to a <td></td> in a table and when you hover over the <td></td> a button is displayed.

But, I'm having trouble with the button that's displayed when the user hovers over the <td></td>'s there is1 thing that is confusing me:

  1. The onclick function in the button isn't working. I tried doing something like this, but it didn't work:

        `<button onclick="myfunction()">Click</button>`

If you could help me, I would really appreciate it.

In more detail here is what my code aims to do:

user inputs text -> users input is outputted in a draggable div -> user can drag output into a <td></td> -> user can then click a button (which is displayed on hover) to delete the content in the <td></td>

Here is the full version of my code:

function addElement () { 
  
  var text = document.getElementById("input").value;
  
  // create a new div element and give it a unique id
  var newDiv = document.createElement("div");
  newDiv.id = 'temp'

  // and give it some content
  var newContent = document.createTextNode(text); 
  
  // add the text node to the newly created div
  newDiv.appendChild(newContent);  

  // add the newly created element and its content into the DOM
  var currentDiv = document.getElementById("div1"); 
  document.body.insertBefore(newDiv, currentDiv); 

  $(function() {
    
    var td = document.getElementsByTagName('td');
    var div = document.getElementsByTagName('div');

    $(div).draggable();
    $("#temp").draggable();

    $(td).droppable({
      drop: function( event, ui ) { 
          $( this )
          .addClass("div")
            .html( text );
              $("div").draggable();

          $( "#temp" ).remove();
      }
    });
  });


  document.getElementById("input").value = " ";



$(function () {
    $("td").dblclick(function (e) {
        e.stopPropagation();
        var currentEle = $(this);
        var value = $(this).html();
        updateVal(currentEle, value);
    });
});

function updateVal(currentEle, value) {
    $(currentEle).html('<input class="thVal" type="text" value="' + text + '" />');
    $(".thVal").focus();
    $(".thVal").keyup(function (event) {
        if (event.keyCode == 13) {
            $(currentEle).html($(".thVal").val().trim());
        }
    });

    $(document).click(function () {
            $(currentEle).html($(".thVal").val().trim());
    });
}

}



    var td = document.getElementsByTagName('td');

  $( "td" ).hover(
  function() {
    $( this ).append( $( "<button>Click</button>" ) );
  }, function() {
    $( this ).find( "button" ).last().remove();
  }
);
body{
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

div {
  text-align: center;
  border: 1px solid #d3d3d3;
  width: 100px;
  padding: 10px;
  cursor: move;
  z-index: 10;
  background-color: #2196F3;
  color: #fff;
}

.div2 {
  position: absolute;
  text-align: center;
  border: 1px solid #d3d3d3;
  padding: 10px;
  cursor: move;
  z-index: 10;
  height: 20px ;
  background-color: red;
  width: 20px;
  color: #fff;
}

.div3 {
  position: absolute;
  text-align: center;
  border: 1px solid #d3d3d3;
  padding: 10px;
  cursor: move;
  z-index: 10;
  height: 20px ;
  background-color: white;
  width: 20px;
  color: #fff;
}


.div {
  text-align: center;
  padding: 10px;
  cursor: move;
  background-color: #2196F3;
  color: #fff;
}

td{
  border: 1px solid #d3d3d3;
  padding: 10px;
  height: 20px ;
  width: 200px;
}

div:hover {
  background-color: yellow;
}
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
      <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
    <link href="style.css" rel="stylesheet" type="text/css" />
      <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  </head>
  <body>
<h1>Input text:</h1>
    <input id="input" type="text" placeholder="input">
    <button onclick="addElement()" >input</button> 

    <p>Drag your outputs to the div:</p>

<table border="1">
  <tr>
    <td height="50" width=100></td>
  </tr>
</table>


     <script src="script.js"></script>
  </body>

</html>

Upvotes: 0

Views: 118

Answers (1)

KienHT
KienHT

Reputation: 1344

1.So the problem is, you include this hover in function addElement(), which will run every time you click input:

$( "td" ).hover(
  function() {
    $( this ).append( $( "<button>Click</button>" ) );
  }, function() {
    $( this ).find( "button" ).last().remove();
  }
);

How to fix: just put it outside of addElement() function.

  1. Make sure to have myfunction() declared globally, at the same level as addElement()

You could try this here: https://jsfiddle.net/Kienht/kh59nx23/2/

However, this just helps answer your 2 questions above, doesn't mean that there is no more issues. id must be unique. You attach the id #temp to all of the new div you create, which will cause you problem later on when user input multiple times. Please consider this.

Upvotes: 1

Related Questions