How to dynamically update what is being appended using javascript - javascript

I am trying to append a box to a list. This box should have a heading which identifies it, but I am having trouble figuring out how to increment each heading by 1.
Currently, the boxes are being generated by this code when a button is clicked.
function createBoxYes(i) {
var box = '<div class="panel-heading">Question 1</div>';
$("#yesColumn").append(box);
}
However, I am trying to increment the Question number based on the input, i. It should equal i + 1. My first thought was to put an id on the div, but if I used findElementById("question"), then it would select all of the boxes, and I want to simply have each box generated to remain unchanged.
Thanks for the help!

This may help you.
function createBoxYes(i) {
var box = '<div class="panel-heading">Question' + (i + 1) +'</div>';
$("#yesColumn").append(box);
}
Just put i+1 in there.

I hope this ll helps you:
var questions = 1;
function createBoxYes() {
var box = '<div class="panel-heading">Question ' + ++questions + '</div>';
$("#yesColumn").append(box);
}
$('#addBox').bind('click', createBoxYes);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet" />
<div id="yesColumn" class="panel panel-default">
<div class="panel-heading">Question 1</div>
</div>
<button id="addBox" class="btn btn-info">Add</button>

Related

Cannot access certain div class using jQuery

Brief synopsis of what I am doing: As of now I am trying to build a 6 x 6 grid and get some sign of life when I click on any of the grid boxes.
The result I want for now, is by clicking in any of the boxes I get a console message saying a piece was picked.
My main goal is to be able to differentiate between which box I picked, but first I need to figure it out generally.
HTML:
<div class="container">
<div class="row">
<div class="btn btn-lg btn-success col-lg-offset-4 col-md-4" id="makeBoard">Generate Board</div>
</div>
<div id="spacer"></div>
<div class="row">
<div class="col-md-12" id="newBoard"></div>
</div>
</div>
JQuery:
$(function(){
$('#makeBoard').click(function() {
var boardSize = 6;
makeBoard(boardSize);
});
function makeBoard(boardSize){
for(i = 0; i < boardSize; i++){
$('#newBoard').append("<div class='row' id='row"+i+"'>");
var row = "#row"+i;
for(j = 0; j < boardSize; j++){
var content = "<div class='col-md-2 boardPiece' id='"+i+"_"+j+"'></div>";
$(row).append(content);
}
$('#newBoard').append("</div>");
}
}
$('div.boardPiece').click(function() {
console.log("You clicked a piece!");
});
});
I double checked the html output by inspecting the element and indeed all the squares have the class 'boardPiece' but whenever I click on anywhere in the grid nothing gets logged in the console.
However, I have tried to console log the id 'newBoard' by clicking anywhere in the box and that worked. I'm assuming it has something to do with the boardPiece not being hardcoded in using HTML like newBoard is?
I'm using JS/JQuery so I can eventually change the board size from a form.
Thank you in advance.
Edit (Answer Below)
//Changed from this
$('div.boardPiece').click(function() {
console.log("You clicked a piece!");
});
//To this
$('.row').on("click", "div.boardPiece", function() {
console.log("You clicked a piece!");
});

How to put a button active by default?

thanks in advance.
The question is:
I have 2 buttons that shows the content of the div when the user click on it.
The content of the div are in a function that shows the content when the users click on the button (onclick).
But when the page loads just appear the two buttons without any content, is there any way to 'put' one of these buttons as active by default?
I tried with this:
Html:
<div class="diferencias col-md-12 col-lg-12">
<div class="diferencias col-md-6 col-lg-6"><input type="button" value="Web" onClick="fashioncatweb();">
</div>
<div class="diferencias col-md-6 col-lg-6"> <input type="button" value="Logo" onClick="fashioncatlogo();">
</div>
</div>
<div class="row">
<div id="container">
<div id="content"></div>
</div>
</div>
JS:
function fashioncatweb()
{
var text = "<p>text";
var img = "images/.....";
var content = "<div class=\"col-md-7\"><div class=img><img class=img-responsive src=\"" + img + "\" alt=\"\" /></div></div>"
+ "<div class=\"col-md-5\"><div class=pre-scrollable id=\"fashion\">" + text + "</div></div>";
appendToContainer(content);
}
function fashioncatlogo()
{
var text = "<p>text";
var img = "images/....png";
var content = "<div class=\"col-md-7\"><div class=img><img class=img-responsive src=\"" + img + "\" alt=\"logo\" /></div></div>"
+ "<div class=\"col-md-5\"><div class=pre-scrollable id=\"logo\">" + text + "</div></div>";
appendToContainer(content);
}
$(document).ready(function () {
piramidalweb();
});
But it just works for one section and I have like 15 different sections.
Thanks again!!
You should have a function that is called on the click of the buttons:
Using pure Javascript:
<input type="button" value="Button1" id="btn1" onclick="showContent(this.id)" />
function showContent(id) {
if(id === "btn1") {
// show the content
}
}
Then call immediately at the base of the page within script tags:
showContent("btn1");
That will load the content immediately.
To improve this you would execute this function onload, or in a ready function within jQuery, but hopefully you'll be able to take it from there.

Target Dynamically Created Divs

I dynamically create a number of divs using javascript based on the number of sections in an external text file. The divs are initially populated with a graph but I'd like to be able to individually toggle the divs over to the raw data that was used to build each graph.
If the text file has 25 sections and creates 25 divs, how do I 'select' say, the 15th div to toggle to the alternate view?
http://jsfiddle.net/EwNRJ/2357/ - demo of a manual solution and framework of the dynamic solution
for (var i = 5; i < count+1; i++) {
new_divs += '<button class="div' + count + '_toggle">toggle ' + count + '</button>;
new_divs += '<div id="div' + count + '_main" class="main" ></div>';
new_divs += '<div id="div' + count + '_alt" class="alt" ></div>';
}
Use jQuery to select all of the child elements $('.container .child'), and then you can use the eq() function to get the nth element. Note that the arrays are zero-indexed, so the fifth element is element 4.
$(document).ready(function() {
// get 5th element (remember arrays are zero-indexed/start at 0)
var $fifth = $('.container .child').eq(4);
// show the fifth element has been selected by setting color to red
$fifth.css({color: 'red'});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
<div class="child">6</div>
<div class="child">7</div>
<div class="child">8</div>
</div>

JQuery: Defining a variable is stopping my script from running

<script>
$(document).foundation(
var count = 1
$("button.test").click(function(){
if ($("p.change-me").text() === "OFF") {
$("p.change-me").text("ON")
count = count + 1
}
else if ($("p.change-me").text() === "ON") {
$("p.change-me").text("OFF")
count = count + 1
}
$("p.counter").text(count)
})
)
</script>
Very simply, I want to show the count as I am pressing this On and Off button. However, when I add the "var count = 1", my button no longer works. When I get rid of that line, the button will turn the text in the tag from ON to OFF and from OFF to ON.
How come? As you can probably tell, I am teaching myself JQuery.
Thanks!
HTML as requested:
<div class="row">
<div class="small-6 columns text-center">
<button class="button radius test">CLICK THIS</button>
</div>
<div class="small-6 columns text-center">
<p class="change-me">OFF</p>
</div>
</div>
<div class="row">
<div class="small-12 columns text-center">
<p>Here we will print how much fun you are having:</p>
<p class="counter">0</p>
</div>
</div>
Take your code out of the foundation() call. Also try to remember using semicolons.
$(document).foundation();
var count = 1;
$("button.test").click(function(){
if ($("p.change-me").text() === "OFF") {
$("p.change-me").text("ON");
count = count + 1;
}
else if ($("p.change-me").text() === "ON") {
$("p.change-me").text("OFF");
count = count + 1;
}
$("p.counter").text(count);
})
#Romain's answer is correct, but just to add to that... foundation is a method-call, and you were trying to put javascript code in the section where you normally put parameters (ie inside the ()). javascript code normally has to go inside of a function's body, not in the section where you type the parameters.

Citing a text area?

I'm just getting started in programming and somehow can't come up with any sensible approach to the following problem, so any help would be greatly appreciated! I have a .html file structured like this:
<head>
<title>ABC</title>
</head>
<body>
<div class="norm">
...
<span class="jnenbez">13</span>
....
<div class="Absatz">text</div>
<div class="Absatz">text</div>
<div class="Absatz">CITE HERE**</div>
The "norm" div is the one parent node. The "jnenbez" span and the "Absatz" divs are inside the "norm" div, but how deeply they are nested can vary. Now I want to cite the "CITE HERE" area, meaning to generate the output of "jnenbez 13 Absatz 3 ABC" - meaning getting the text content of the "jnenbez" span of the same "norm" div, getting the index number of the "Absatz" div, since it is the third child "Absatz" of the "norm" div and getting the content.
1) How could I give this string to the user, so he could copy paste it somewhere else? It seems it is not easily possible to modify the copy+paste behavior of Firefox. An obvious solution would be to put the output in brackets like [jnenbez...] at the end of each divs text content, but that would reduce readability of the html...
2) Is it even possible to automatically generate this output via JQuery?
Not sure about a good way to store/display the info.
Also, unsure of what other mark-up you would have in the class='norm' container. This is vitally important and impacts entirely the shape of the useful solution.
I've assumed a particular structure - one that says the first contained span is one of interest. Another assumption is that the only divs in the container are of interest and need to be counted.
I'm sure you can break it easily enough. :D
<!DOCTYPE html>
<html>
<head>
<script>
function onBtnPress(element)
{
var result;
var cont = element.parentNode;
var span = cont.getElementsByTagName('span')[0];
result = span.className + " ";
result += span.innerHTML + " ";
var divList = cont.getElementsByTagName('div');
result += divList[0].className + " ";
result += divList.length+" ";
result += document.title;
cont.getElementsByTagName('p')[0].innerHTML = result;
}
</script>
<title>ABC</title>
</head>
<body>
<div class="norm">
<span class="jnenbez">13</span>
<div class="Absatz">text</div>
<div class="Absatz">text</div>
<div class="Absatz">CITE HERE**</div>
<button onclick='onBtnPress(this);'>click me</button>
<p>[string here]</p>
</div>
<div class="norm">
<span class="Crapple">8</span>
<div class="ipod">worst</div>
<div class="ipod">music</div>
<div class="ipod">player</div>
<div class="ipod">I ever</div>
<div class="ipod">bought</div>
<div class="ipod">CITE HERE**</div>
<button onclick='onBtnPress(this);'>click me</button>
<p>[string here]</p>
</div>
</body>
</html>

Categories

Resources