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