So I've got this script:
<script>
var twitchApi = "https://api.twitch.tv/kraken/streams";
$.getJSON(twitchApi, function(json) {
for (var i = 0; i < 9; i++) {
var streamGame = json.streams[i].game;
var streamThumb = json.streams[i].preview.medium;
var streamVideo = json.streams[i].channel.name;
<!-- var streamViewers = json.streams[i].streamViewers; -->
var img = $('<img style="width: 250px; height: 250px;" src="' + streamThumb + '"/>')
$('#twitch').append(img);
img.click(function() {
$('#twitch iframe').remove()
$('#twitch').append('<iframe src="http://player.twitch.tv/?channel=' + streamVideo + '"></iframe>');
});
}
});
</script>
And I want to make that once you click on let's say #load ( which is an image ) or on a button or whatever, it adds +9 items from the JSON. How can I modify the code to get the onClick action which calls for another 9 items from the JSON?
Related
class Storedata {
constructor(name, desc, price, qty) {
this.name = name;
this.desc = desc;
this.price = price;
this.qty = qty;
}
}
var arr = [];
var btnform = document.getElementById('clicktoadd');
var btnlist = document.getElementById('clicktoshow');
var rem = document.getElementById('main');
var cancelform;
var submit;
function addData() {
var proname = document.getElementById("inpname");
var prodesc = document.getElementById("inpdesc");
var propric = document.getElementById("inpprice");
var proqty = document.getElementById("inpqty");
arr.push(new Storedata(proname.value, prodesc.value, propric.value, proqty.value));
}
function showlist() {
var data = document.createElement('table');
data.setAttribute("id", "data");
data.innerHTML += "<tr><th>Product Name</th><th>Description</th><th>Price</th><th>Quantity</th><th></th></tr>";
for (let i = 0; i < arr.length; i++) {
data.innerHTML += ("<tr><td>" + arr[i].name + "</td><td>" + arr[i].desc + "</td><td>" + arr[i].price + "</td><td>" + arr[i].qty + "</td><td><button id=\"delete" + i + "\">Delete</button></tr>");
};
document.getElementById('listing').appendChild(data);
document.getElementById('showbutton').removeAttribute("hidden", false);
}
function removelist() {
var data = document.getElementById("data");
data.parentNode.removeChild(data);
}
function addformtopage() {
var form = document.createElement('div');
form.setAttribute("id", "remform");
form.innerHTML += "<div id=\"lblname\">Product Name:</div><input id=\"inpname\" type=\"text\"><div id=\"chkname\" hidden=\"true\">Enter a Product Name</div><div id=\"lbldesc\">Description:</div><textarea id=\"inpdesc\" rows=\"10\" cols=\"35\"></textarea><div id=\"chkdesc\" hidden=\"true\">Enter a Product Desciption</div><div id=\"lblprice\">Price in INR:</div><input id=\"inpprice\" type=\"number\"><div id=\"chkprice\" hidden=\"true\">Enter a Product Price</div><div id=\"lblqty\">Quantity:</div><input id=\"inpqty\" type=\"number\"><div id=\"chkqty\" hidden=\"true\">Enter a Product Quantity</div><br><br><button id=\"submitproduct\">Submit</button><button id=\"cancel\">Cancel</button>";
document.getElementById('panel').appendChild(form);
cancelform = document.getElementById('cancel');
submit = document.getElementById('submitproduct');
}
function validateform() {
var proname = document.getElementById("inpname");
var prodesc = document.getElementById("inpdesc");
var propric = document.getElementById("inpprice");
var proqty = document.getElementById("inpqty");
var errname = document.getElementById("chkname");
var errdesc = document.getElementById("chkdesc");
var errpric = document.getElementById("chkprice");
var errqty = document.getElementById("chkqty");
if ((proname.value) && (prodesc.value) && (propric.value) && (proqty.value)) {
errname.setAttribute("hidden", true);
errdesc.setAttribute("hidden", true);
errpric.setAttribute("hidden", true);
errqty.setAttribute("hidden", true);
return true;
}
if (proname.value) {
errname.setAttribute("hidden", true);
}
if (prodesc.value) {
errdesc.setAttribute("hidden", true);
}
if (propric.value) {
errpric.setAttribute("hidden", true);
}
if (proqty.value) {
errqty.setAttribute("hidden", true);
}
if (!proname.value) {
errname.removeAttribute("hidden", false);
}
if (!prodesc.value) {
errdesc.removeAttribute("hidden", false);
}
if (!propric.value) {
errpric.removeAttribute("hidden", false);
}
if (!proqty.value) {
errqty.removeAttribute("hidden", false);
}
return false;
}
function clearform() {
var proname = document.getElementById("inpname");
var prodesc = document.getElementById("inpdesc");
var propric = document.getElementById("inpprice");
var proqty = document.getElementById("inpqty");
proname.value = null;
prodesc.value = null;
propric.value = null;
proqty.value = null;
}
function removeform() {
var elem = document.getElementById("remform");
elem.parentNode.removeChild(elem);
}
function removebuttons() {
rem.setAttribute("hidden", true);
}
function showbuttons() {
rem.removeAttribute("hidden", false);
}
btnform.addEventListener('click', function() {
addformtopage();
removebuttons();
cancelform.addEventListener('click', function() {
showbuttons();
removeform();
});
submit.addEventListener('click', function() {
if (validateform()) {
alert("Values Added");
addData();
clearform();
}
});
});
btnlist.addEventListener('click', function() {
showlist();
removebuttons();
document.getElementById('showbutton').addEventListener('click', function() {
showbuttons();
removelist();
document.getElementById('showbutton').setAttribute("hidden", "true");
});
});
#chkname,
#chkdesc,
#chkprice,
#chkqty {
color: red;
}
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 70%;
}
td,
th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
<!DOCTYPE HTML>
<html>
<head>
<link href="style.css" rel="stylesheet" />
<title>
JS Form
</title>
</head>
<body>
<div id="main">
<p><button id="clicktoadd">Add Product</button> <button id="clicktoshow">Show List</button></p>
</div>
<div id="panel">
</div>
<div id="listing">
</div>
<button id="showbutton" hidden="true">< Back</button>
<script src="script.js"></script>
</body>
</html>
I want to take input in form for description of the item as formatted text. And then output it in the same format as input, but right now I am getting text separated by space where should be there. Please help..
Steps to perform
1. Run this code snippet.
2. Click on 'Add Product' button.
3. Fill the form (For testing give a description of more than one line) and Submit.
4. Click on 'Cancel' button to return.
5. Click on 'Show List' button.
6. Observe Description column.
This is output I am getting separated by spaces
This is form input I am providing
Well, you have two options. Add a <pre> tag:
for (let i = 0; i < arr.length; i++) {
data.innerHTML += ("<tr><td>" + arr[i].name + "</td><td><pre>" + arr[i].desc + "</pre></td><td>" + arr[i].price + "</td><td>" + arr[i].qty + "</td><td><button id=\"delete" + i + "\">Delete</button></tr>");
};
This way it will display the new lines and you keep your string clean.
Or you can replace the new lines with <br> this way:
for (let i = 0; i < arr.length; i++) {
data.innerHTML += ("<tr><td>" + arr[i].name + "</td><td>" + arr[i].desc.replace(/\n/g, "<br>") + "</td><td>" + arr[i].price + "</td><td>" + arr[i].qty + "</td><td><button id=\"delete" + i + "\">Delete</button></tr>");
};
Remember that the new lines are not shown by default in HTML, if you want a new line put a <br>
Test it online
Hope it helps! :)
Add this into your code:
var text = arr[i].desc;
text = text.replace(/\n/g, '<br />');
JSfiddle
See JavaScript: How to add line breaks to an HTML textarea? too.
I am having some trouble to get through this below jsfiddle task.
jsfiddle link
I want to do the same function using dynamic id.
I tried so many methods, but nothing works.
Please don't recommend to change the infrastructure. The page has been already designed the same kind of structure.
I need to achieve this same kind of function using two nested for loops with dynamic id.
HTML:
<div class="col-md-4" id="beforeDiv0">
<div class="col-md-2" style="padding-right: 0px; padding-top: 5px;">
<label for="Amount" style="font-weight:bold;">Amount:</label>
</div>
<div class="col-md-6">
<input class="form-control" type="number" id="textboxId0" value="1000" />
</div>
</div>
<br/><br/>
<div class="col-md-4" id="beforeDiv1">
<div class="col-md-2" style="padding-right: 0px; padding-top: 5px;">
<label for="Amount" style="font-weight:bold;">Amount:</label>
</div>
<div class="col-md-6">
<input class="form-control" type="number" id="textboxId1" value="1000" />
</div>
</div>
Javascript & jQuery:
$(document).ready(function(){
var newAmount = parseFloat(1000) + parseFloat(5);
for(var id=0; id<3; id++){
for (var i = 1; i < 3; i++) {
var html = '<tr style="height:50px;">';
html = html + '<td class="td-Amount" style="text-align: right; font-size: 15px; font-weight: bold;">';
html = html + 'Original: '+ '<span id="OrginalAmount' + i + '">' + 1000 + '</span><br/>' + 'New: <span id="Output' + id + "" + i + '">' + newAmount + '</span></td>';
html = html + '</tr>';
$(html).insertAfter("#beforeDiv" + id);
//var abc = id + "" + i;
//var xyz = '#textboxId' + id;
//var zyx = "Output"+id+""+i;
}
}
var myArr = new Array();
var myArr2 = new Array();
for(var id=0; id<3; id++){
var xyz = '#textboxId' + id;
myArr[id] = id;
for (var i = 1; i < 3; i++) {
myArr2[i] = i;
var calc = myArr[id] + "" + myArr2[i];
var zyx = "Output" + calc;
//below line is for dynamic id retrieval
/*
$(xyz).on("click change paste keyup", function() {
var x = parseFloat(1000);
var y = parseFloat($(this).val());
var AmtChange = x + y;
document.getElementById(zyx).innerHTML = AmtChange;
});
*/
$("#textboxId0").on("click change paste keyup", function() {
var x = parseFloat(1000);
var y = parseFloat($(this).val());
var AmtChange = x + y;
document.getElementById("Output01").innerHTML = AmtChange;
document.getElementById("Output02").innerHTML = AmtChange;
});
$("#textboxId1").on("click change paste keyup", function() {
var x = parseFloat(1000);
var y = parseFloat($(this).val());
var AmtChange = x + y;
document.getElementById("Output11").innerHTML = AmtChange;
document.getElementById("Output12").innerHTML = AmtChange;
});
}
}
});
I looked at your code, and considered your comments, and if I understand you correctly, then something like this is what you are after:
$('input[id^=textboxId]').on("click change paste keyup", function() {
var id = $(this).attr('id');
id = id.replace(/\D/g,'');
var x = parseFloat(1000);
var y = parseFloat($(this).val());
var AmtChange = x + y;
/**
* The following could not really be simplified, because
* there are no defining data- attributes, or anything
* to identify the table rows as belonging to the textbox.
* When I tried to simplify the selection of "output" spans,
* a span with id Output111 would have been matched by Output11
* and Output1.
*/
$('#beforeDiv' + id).nextUntil('br').each(function(i,el){
$('span[id^=Output]', this).text(AmtChange);
});
});
I tested this on Codepen: https://codepen.io/skunkbad/pen/ayeVLp
I'm trying to realise this code in the snippet, for the moment I'm working only on the button Label, so when I click on this button, it adds a small formular that allows to creat this a label in the right side by clicking on OK. However, even if I click on OK nothing happens, normally a label should appear with the name inserted in the textfield "label".
Does anyone know where is the problem? Thank you in advance.
$(function(){
$('button').click(function(){
var typeButton = $(this).text();
if(typeButton=='Label'){
$('hr').remove();
$('#formule').remove();
$('#droite').append('<hr>');
var elementLabel = 'Texte du label';
var elementTexte = '<input type="text" name="label"/>';
var elementButton = '<button>OK</button>';
var elementSpan = elementLabel+' '+elementTexte+' '+elementButton;
var elementDiv = '<div id="formule">'+elementSpan+'</div>'
$(elementDiv).insertAfter('hr');
};
if(typeButton=='OK'){
$('hr').remove();
var elementNom = $('input[name=label]').val();
var elementSpan = '<span>'+elementNom+'</span>';
$('#formule').remove();
$('#gauche').append('elementSpan');
};
});
});
body {
margin: 0;
}
#gauche {
float: left;
width: 70%;
height: 1000px;
background-color: #EFECCA;
}
#droite {
background-color: #CEFFF8;
height: 1000px;
padding : 10px;
padding-left: 71%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div id="gauche">
</div>
<div id="droite">
Utilisez ces boutons pour créer votre formulaire<br><br>
<button>Label</button>
<button>Zone de texte</button>
<button>Bouton</button>
</div>
you need to delegate dynamically added elements using on event handler attachment with the document.
$(document).on('click', 'button', function () {
var typeButton = $(this).text();
if (typeButton == 'Label') {
$('hr').remove();
$('#formule').remove();
$('#droite').append('<hr>');
var elementLabel = 'Texte du label';
var elementTexte = '<input type="text" name="label"/>';
var elementButton = '<button>OK</button>';
var elementSpan = elementLabel + ' ' + elementTexte + ' ' + elementButton;
var elementDiv = '<div id="formule">' + elementSpan + '</div>'
$(elementDiv).insertAfter('hr');
};
if (typeButton == 'OK') {
$('hr').remove();
var elementNom = $('input[name=label]').val();
var elementSpan = '<span>' + elementNom + '</span>';
$('#formule').remove();
$('#gauche').append(elementSpan);
};
});
It's because the button that gets generated to the DOM (OK) doesn't have an event listener attached to it, so it has nothing to do when being pressed. $('button').click() doesn't get updated any time the DOM changes, so you have to do it yourself.
$(function() {
function listenToButtons() {
$('button').off().on('click', function() {
var typeButton = $(this).text();
if (typeButton == 'Label') {
$('hr').remove();
$('#formule').remove();
$('#droite').append('<hr>');
var elementLabel = 'Texte du label';
var elementTexte = '<input type="text" name="label"/>';
var elementButton = '<button>OK</button>';
var elementSpan = elementLabel + ' ' + elementTexte + ' ' + elementButton;
var elementDiv = '<div id="formule">' + elementSpan + '</div>'
$(elementDiv).insertAfter('hr');
listenToButtons();
};
if (typeButton == 'OK') {
$('hr').remove();
var elementNom = $('input[name=label]').val();
var elementSpan = '<span>' + elementNom + '</span>';
$('#formule').remove();
$('#gauche').append('elementSpan');
};
});
}
listenToButtons();
});
I've got this script which fetches stuff from a JSON. Onclick of the thumbnail, it opens up an iframe next to it. Well I want the iframe to pop out and make the background darker ( you know the drill ). How can I do that?
$(function() {
var i=0;
var twitchApi = "https://api.twitch.tv/kraken/streams";
var twitchData;
$.getJSON(twitchApi, function(json) {
twitchData = json.streams;
setData()
});
function setData(){
var j = twitchData.length > (i + 9) ? (i + 9) : twitchData.length;
for (; i < j; i++) {
var streamGame = twitchData[i].game;
var streamThumb = twitchData[i].preview.medium;
var streamVideo = twitchData[i].channel.name;
var img = $('<img style="width: 250px; height: 250px;" src="' + streamThumb + '"/>')
$('#twitch').append(img);
img.click(function(){
$('#twitch iframe').remove()
$('#twitchframe').append( '<iframe frameborder="0" style="overflow:hidden; margin-left: 25px; width:400px; height:250px; position: fixed; top: 0; margin-top: 23.55%;" src="http://player.twitch.tv/?channel=' + streamVideo + '"></iframe>');
});
}
}
$('#load').click(function() {
setData();
});
});
I am dynamically generating textboxes and only 5 textbox are allowed.
Now say i have generated 5 textbox with Txtopt1,Txtopt2,Txtopt3 resp..
and i am removing 2nd textbox and then again I am generating 1 new
textbox then i want to assign Txtopt2 to newly generated textbox
instead of Txtopt4.
This is my Code:
var cnt = 1;
var usedIds = [];
var maxNumberOfTextboxAllowed = 5;
function Generatetextbox() {
if (cnt <= maxNumberOfTextboxAllowed) {
var id = findAvailableId();
var OrderingField = $("<div class='OrderingField' id='OrderingField" + id + "'/>");
var LeftFloat = $("<div class='LeftFloat' id='LeftFloat" + id + "'/>");
var RightFloatCommands = $("<div class='RightFloat Commands' id='RightFloat Commands" + id + "'/>");
var upButton = $("<button value='up'>Up</button>");
var downButton = $("<button value='down'>Down</button>");
var fName = $("<input type='text' class='fieldname' id='Txtopt" + id + "' name='TxtoptNm" + id + "'/>");
var removeButton = $("<img class='remove' src='../remove.png' />");
LeftFloat.append(fName);
LeftFloat.append(removeButton);
RightFloatCommands.append(upButton);
RightFloatCommands.append(downButton);
OrderingField.append(LeftFloat);
OrderingField.append(RightFloatCommands);
$("#FieldContainer").append(OrderingField);
cnt = cnt + 1;
}
else
alert("Cant create more than 5 route points")
}
function findAvailableId() {
var i = 1;
while (usedIds[i]) i++;
usedIds[i] = true;
return i;
};
function removeId(idToRemove) {
usedIds[idToRemove] = false;
};
$(document).on('click', "img.remove", function() {
$(this).parent().parent().fadeOut(1000, function() {
if (cnt > maxNumberOfTextboxAllowed)
cnt = cnt - 2;
else if (cnt == 1)
cnt = 1;
else
cnt = cnt - 1;
var id = $(this).attr("id").substr(5);
removeId(id);
$(this).remove();
console.log(cnt)
});
});
.LeftFloat
{
float: left
}
.RightFloat
{
float: right
}
.FieldContainer
{
border: 1px solid black;
width: 400px;
height: 300px;
overflow-y: auto;
font-family:tahoma;
}
.OrderingField
{
margin: 3px;
border: 1px dashed #0da3fd;
background-color: #e8efff;
height: 50px;
}
.OrderingField div.Commands
{
width: 60px;
}
button
{
width: 60px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="FieldContainer">
</div>
<button onclick="Generatetextbox()" class="btn btn-primary" type="button">Add</button>
Keep track of the IDs you've assigned, and always take the lowest ones available.
Also, You don't need to use escape characters inside your html, you can use the single quote marks to specify strings.
Something like this should help:
var cnt = 1;
var maxNumberOfTextboxAllowed = 5;
var usedIds = [];
function findAvailableId() {
var i = 1;
while (usedIds[i]) i++;
usedIds[i] = true;
return i;
};
function removeId(idToRemove) {
usedIds[idToRemove] = false;
};
function Generatetextbox() {
if (cnt <= maxNumberOfTextboxAllowed) {
var id = findAvailableId();
var fieldWrapper = $("<div class='fieldwrapper' id='field" + id + "'/>");
var fName = $("<input type='text' class='fieldname' id='Txtopt" + id + "' name='TxtoptNm" + id + "' />");
var removeButton = $("<img class='remove' src='../remove.png' />");
fieldWrapper.append(fName);
fieldWrapper.append(removeButton);
fieldWrapper.append('<br />');
fieldWrapper.append('<br />');
$("#abc").append(fieldWrapper);
cnt = cnt + 1;
} else
alert("Cant create more than 5 textbox")
}
$(document).on('click', "img.remove", function() {
$(this).parent().fadeOut(1000, function() {
if (cnt > maxNumberOfTextboxAllowed)
cnt = cnt - 2;
else if (cnt == 1)
cnt = 1;
else
cnt = cnt - 1;
var id = $(this).attr("id").substr(5);
removeId(id);
$(this).remove();
console.log(cnt)
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="abc"></div>
<button onclick="Generatetextbox()" class="btn btn-primary" type="button">Add</button>