javascript copy div change innerHTML id - javascript

I need to copy content from one div to another one with changing button's id (increment them)
Sample:
<script type="text/javascript">
function add(){
document.getElementById('two').innerHTML = document.getElementById('one').innerHTML;
}
</script>
<div id="one">
<button id="button_1" >Button_1</button>
</div>
<div id="two"></div>
<button onclick="add();">Add</button>
This of course can't work properly.
Result should be following:
<div id="two">
<button id="button_2" >Button_2</button>
</div>
Any simple way how to do this ?

If you want copy the button onclick of a button it will work for you i guess..
document.getElementById('button').onclick = duplicate;
var i = 0;
var original = document.getElementById('one');
function duplicate() {
var clone = original.cloneNode(true); // "deep" clone
clone.id = "one" + ++i; // there can only be one element with an ID
original.parentNode.appendChild(clone);
}
<div id="one">
<button id="button_1" >Button_1</button>
</div>
<button id="button" style="color:red">Add</button>

I've made small change in 'id' of the wrapping div.
<div id="1" class="button">
<button id="button_1" >Button_1</button>
</div>
<button onclick="add();">Add</button>
<script type="text/javascript">
function add(){
var count = document.querySelectorAll('.button').length;
var newCount = count+1;
var elDiv = document.createElement('div');
elDiv.setAttribute("id", newCount);
elDiv.setAttribute("class", "button");
elDiv.innerHTML = '<button id="button_"+newCount+">Button_'+newCount+"</button>";
document.getElementById(count).appendChild(elDiv);
}
</script>
However it can be done in more simpler way using jQuery. Hope this helps.

Are you looking for something like this. With a good mastery of jQuery traversal you may not even need to give each button an id. May be a common class may serve you well.
$(function() {
var last = $('.container');
var curr = last;
$('#add').on('click', function() {
last = curr.clone();
last.find('button').attr('id', function() {
return 'button_' + ( $('div.container').length + 1 );
})
.html(function() {
return 'Button_' + ( $('div.container').length + 1 );
}).end()
.insertAfter( curr );
curr = last;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<button id="button_1" >Button_1</button>
</div>
<button id="add">Add</button>

Using JQuery:
function add( fromId, toId ){
content = $('#'+fromId).clone();
button = content.find('button');
if( button.length == 1 ){
buttonId = button.attr('id');
number = buttonId.match(/\d+/g);
number = parseInt(number[0]) + 1;
button.attr('id','button_' + number);
button.html('Button_' + number);
}
$('#'+toId).html(content.html());
}
Just call
add('one','two');

Related

How to assigned different url link when a particular button from groups of button is selected?

I want to create a group of buttons that when clicked will return different download link to the user email. I am trying to do it with javascript switch but I not sure how to return the download link so that the download link can be retrieved using PHP get to send in the email.
<div class="row">
<div class="col-md-3">
<div class="text-center">
<i class="fa fa-file" style="font-size:48px; color:#00ffff;"></i>
<span><h6>User Manual:Accounting</h6></span>
<button class="downloadButton" id="401" type="button" data-toggle="modal" data-target="#downloadModal" style="border-radius:5px; outline:none; background-color:Transparent;">
<i class="fa fa-download" style="font-size:24px; color:#737373;"></i>
</button>
</div>
</div>
<script>
function linkFunction(){
var buttonClass = document.getElementsByClassName["download-button"];
var buttonId = buttonId.attr('id');
var link;
Is this maybe what you're looking for? Hope it helps!
<html>
<head>
<script>
window.onload = doThis;
/* This one would work well and allow you to pass arguments */
function doThis() {
var buttonClass = document.getElementById("download_button");
var buttonId = buttonClass.id;
var buttonName = buttonClass.name;
var buttonLinkId = buttonClass.getAttribute('data-linkId');
buttonClass.addEventListener('click', buttonClickedCaller);
function buttonClickedCaller(){
buttonClicked(buttonLinkId);
}
function buttonClicked(foo) {
console.log('http://localhost/?' + foo);
window.location = 'http://localhost/?' + foo;
// window.open('http://localhost/?'+foo);
}
}
/*
// here's a simpler example
function doThis() {
var buttonClass = document.getElementById("download_button");
var buttonId = buttonClass.id;
var buttonName = buttonClass.name;
var buttonLinkId = buttonClass.getAttribute('data-linkId');
buttonClass.addEventListener('click', buttonClicked);
function buttonClicked() {
console.log('http://' + buttonLinkId);
}
}
// careful though, this won't work.
function doThis() {
var buttonClass = document.getElementById("download_button");
var buttonId = buttonClass.id;
var buttonName = buttonClass.name;
var buttonLinkId = buttonClass.getAttribute('data-linkId');
// Passing a Variable in Below Here
buttonClass.addEventListener('click', buttonClicked(buttonLinkId));
// Will Break Here & It's executed onload, but the above one isn't
function buttonClicked(foo) {
console.log('http://' + foo);
}
}
*/
</script>
</head>
<body>
<div class="row">
<div class="col-md-3">
<div class="text-center">
<span><h6>User Manual:Accounting</h6></span>
<button id="download_button" data-linkId="401">
Click Here
</button>
</div>
</div>
</body>
<html>

create multiple arrays on different elements

I'm trying to set a function in my application which allows the user to click on a button and then click the submit button which displays an image, but I want the buttons to hold more than one image and randomly select an image from the array.
How can I do this?
<div id='prefPage'>
<header id='header2pref'>
<div id='title2pref'>PREFERENCES</div>
</header>
<div id='body'>
<div id='leftAlign'>
<div id="foodpicloc">
</div>
</div><button id='myBtn2'>SET PREFRENCES</button>
<div id='rightAlignPref'>
<div id=fixed>
<div>
<button id="button1">BURGER</button>
<button id="button2">HOTDOG</button>
</div>
</div>
</div>
</div>
</div>
var button1 = document.getElementById("button1");
var button2 = document.getElementById("button2");
var preference = document.getElementById("preference");
var foodpic = document.getElementById("foodpiclocation");
var foodpic;
button1.addEventListener('click', function() {
foodpicurl = 'burger.svg';
});
button2.addEventListener('click', function() {
foodpicurl = 'hotdog.svg';
});
preference.addEventListener('click', function() {
var foodpic = document.createElement('img');
foodpic.src = foodpicurl;
foodpiclocation.innerHTML = '';
foodpiclocation.appendChild(foodpic);
});
Clean solution using vanilla Javascript. NOTE: I suggest you add this to your HTML code <div id="foodpicloc"><img id="foodpic"></div> in your HTML first. Changing the image's src is quicker and cleaner than appending a new image element everytime the image changes.
Define
function mapClickToImage(imageSelector, updateBtnSelector, btnSectorToImageSrcMapping) {
var currentImageSrc = null;
var imageElement = document.querySelector(imageSelector);
for (var btnSelector in btnSectorToImageSrcMapping) {
var buttonElement = document.querySelector(btnSelector);
buttonElement.addEventListener('click', function() {
currentImageSrc = btnSectorToImageSrcMapping[btnSelector];
});
var updateButtonElement = document.querySelector(updateBtnSelector);
updateButtonElement.addEventListener('click', function() {
if (currentImageSrc) {
imageElement.src = currentImageSrc;
}
});
}
Usage
mapClickToImage('#foodpic', '#preference', {
'#button1': 'burger.svg',
'#button2': 'hotdog.svg'
});

JavaScript function to hide buttons if specific text shows

I have a function called hideButtons that i want to hide buttons if certain text is present in the paragraph.
The paragraph goes through a list of names that the user either likes or dislikes and then when there are no more names then the buttons disappear.
Obviously this is sudo at the moment:
function hideButtons(){
if namespace.indexOf("Out of people"){
#likeButton = hidden;
#dislikeButton = hidden;
}
}
This is a working function
function showName(){
var name = names[0];
if (!name){
name = 'Out of people';
}
console.log(names)
document.getElementById('namespace').innerHTML = name;
}
And the html:
<body>
<p id='namespace'> Namelist </p>
<button id="likebutton" type="button">Like</button>
<button id="dislikebutton" type="button">Dislike</button>
</body>
You are sort of mixing up javascript and jQuery.
In javascript, to get the value of a p tag:
var ns = document.getElementById('namespace').innerHTML;
the same thing in jQuery:
var ns = $('#namespace').text();
jQuery uses the CSS selectors to identify elements, javascript does not.
Here is a semi-working version of your code.
var lb = document.getElementById('likebutton');
lb.addEventListener('click', hideButtons, false);
var db = document.getElementById('dislikebutton');
db.addEventListener('click', hideButtons, false);
function hideButtons(){
var ns = document.getElementById('namespace').innerHTML;
alert(ns);
if (ns.indexOf("Namelist") > -1 ){
lb.style.display = 'none';
db.style.display = 'none';
}
}
function showName(){
var name = names[0];
if (!name){
name = 'Out of people';
}
console.log(names)
document.getElementById('namespace').innerHTML = name;
}
<body>
<p id='namespace'>Namelist</p>
<button id="likebutton" type="button">Like</button>
<button id="dislikebutton" type="button">Dislike</button>
</body>
Here is the same code in jQuery:
$('#likebutton, #dislikebutton').click(function(){
var ns = $('#namespace').text();
if ( ns.indexOf('Namelist') > -1 ){
$('#likebutton').hide();
$('#dislikebutton').hide();
}else{
alert('P tag does not contain the word namespace');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body>
<p id='namespace'>Namelist</p>
<button id="likebutton" type="button">Like</button>
<button id="dislikebutton" type="button">Dislike</button>
</body>

Can't insert a div into another internal div

I need your help to solve a problem I have.
I have this code:
<div id="div1" >
<div id="edit1">
hello
<input type="button" id="b1" onclick="aaa()"/>
</div>
</div>
I want to use insert into the internal div (id=edit1) another new div I generated.
I tried alike code but it's not running:
js:
function aaa()
{
var elem = createDivLine();
var el1 = document.getElementById("div1");
var el2 = el1.getElementById("edit1");
el2.appendChild(elem);
}
function createDivLine()
{
var tempDiv1 = document.createElement("div");
tempDiv1.innerHTML = "Sam";
return tempDiv1;
}
The result should looks like this:
<div id="div1" >
<div id="edit1">
hello
<input type="button" id="b1" onclick="createDivTable()"/>
<div>"Sam"</div>
</div>
</div>
JSFiddle: http://jsfiddle.net/KknXF/
Since IDs are unique, it is not valid to attempt to get an element's children by ID.
Remove this line:
var el1 = document.getElementById('div1');
And change the following line to:
var el2 = document.getElementById('edit1');
In the event that you have some irrepairably (I can never spell that word...) broken HTML that you can't possibly change, try this:
var el2 = document.querySelector("#div1 #edit1");
It should be
function aaa() {
var elem = createDivLine();
var el2 = document.getElementById("edit1");
el2.appendChild(elem);
}
Demo: Fiddle

How to define a method and attribute to my appended div?

I have DIVs dynamically appended to the DOM. I want each of them to have some method, like when I click a button inside the div, the div will be removed from the DOM; and some attributes that I can read from.
So I figure I need an object, but this is what confuses me:
var block = tmpl('added_video_thumb', data);
$('#wrapper').append(block);
I want the block to be the object, so I did this:
var blocks = function(id, data){
this.block = tmpl('added_video_thumb', data);
}
And I changed the code to this:
var block = new blocks('added_video_thumb', data);
$('#wrapper').append(block);
Then I don't know how to define the method, I don't want to call a function like:
$('#delete').click(function(){
block.remove();
})
What I want is when I do this:
var block = new blocks();
It takes care of everything. Please help me construct this blocks object.
If I understand your problem, it is that you want to dynamically create an element and assign methods to it's own children.
HTML
<button id="add">Add</button>
<div class="container">
</div>
JS
function addBlock() {
var div = $( '<div class="inner_div">
<button class="delete">Delete</button>
</div>' );
div.children('button.delete').on( 'click', function() {
$(this).parent().remove();
});
$('.container').append(div);
}
Example on fiddle : http://jsfiddle.net/wyXxn/1/
​
You can check the following fiddle
HTML Code
<input type="text" placeholder="ID" id="id-input" />
<input type="text" placeholder="data" id="data-input" />
<button id="add-div">Add Div</button>
<div id="wrapper">
</div>​
JS Code
$(function(){
var block = function(id, data) {
this.id = id;
this.data = data;
$("#wrapper").append('<div id="' + id + '">'+ data +'<br /> <button id="del-' + id + '">Delete Me!</button> </div>');
$("#del-"+id).click(function() {
$("#"+id).remove();
});
}
$("#add-div").click(function() {
var newBlock = new block($("#id-input").val(), $("#data-input").val());
});
});​

Categories