I want to add a input element on the DOM tree with an attribute of type=text with jQuery. However it seems to not work. The DOM tree is the same and no console errors.
$(document).ready(function() {
var $code = $("#command");
var $text = $("#itemtext");
var $count = $('#count');
var $add = $('add');
$add.click(function() {
$("#items").last().after('<input type="text" id="itemtext" />');
});
$("#generatebutton").click(function() {
$code.text('/give @p bundle{Items:[{id:' + $text.val() + ',Count:' + $count.val() + '}]}');
});
});<body>
<h1 id="title">Bundle Generator for mc</h1>
<div id="items">
<input type="text" placeholder="item name" id="itemtext">
<input type="number" min="-128" max="127" id="count">
<button id="addslot">Add slot</button>
<button id="generatebutton">Generate!</button>
</div>
<h2>Your command is here!</h2>
<p id="command"></p>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</body>this line:
$("#items").last().after('<input type="text" id="itemtext" />');
doesn't work, can anyone help me?
You have mentioned an id that isn't in DOM. Maybe you are looking for addslot instead of add? Also there is no indication of id ('#') in var $add = $('add').
$(document).ready(function() {
var $code = $("#command");
var $text = $("#itemtext");
var $count = $('#count');
var $add = $('#addslot');
$add.click(function() {
$("#items").last().after('<input type="text" id="itemtext" />');
});
$("#generatebutton").click(function() {
$code.text('/give @p bundle{Items:[{id:' + $text.val() + ',Count:' + $count.val() + '}]}');
});
});<body>
<h1 id="title">Bundle Generator for mc</h1>
<div id="items">
<input type="text" placeholder="item name" id="itemtext">
<input type="number" min="-128" max="127" id="count">
<button id="addslot">Add slot</button>
<button id="generatebutton">Generate!</button>
</div>
<h2>Your command is here!</h2>
<p id="command"></p>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</body>