I have created a dynamic button. and now I,m trying to add a dynamic anchor tag. But it doesn't work. Before posting this I went through all the other example, but no success. Please advice.
<script>
$(document).ready(function(){
//creating an dynamic button element
var btn = document.createElement('input');
var text = document.createTextNode('Click Me!')
btn.appendChild(text);
btn.id = "myBtn"
btn.type = "button";
btn.value="Click me!"
document.body.appendChild(btn)
//adding click event to the dynamic button
$("body").on("click", "myBtn", function(){
var myLink = document.createElement('a')
var myText = document.createTextNode('This is a dynamic link')
myLink.setAttribute("href", "http://www.example.com");
myLink.target = "_blank"
myLink.title = "www.example.com"
myLink.style.marginTop = "25px"
myLink.appendChild(myText);
document.body.appendChild(myLink);
})
})
</script>
$(document).on('click','#myBtn',function(){
//write your function here
});
Related
I'm trying to get the file blob using the following function:
$('body').delegate('[id^="prod_img"]', 'click', function()
{
var id = $(this).data('id');
var reader = new FileReader();
var selectedFile = $('#prod_img' + id).files[0]; // <- what's the solution here
reader.onload = function (e) {
var imageSrc = e.target.result;
$('#img_prod' + id).attr('src', imageSrc);
};
reader.readAsDataURL(selectedFile);
});
but I get a cannot read property '0' of undefined error. I know the answer is probably on the web, I just have difficulty conceiving the correct search term. Anyway, will you assist me here? I usually code
var file = event.target.files[0];
and I now don't know how to get the event here. Thanks.
UPDATE
The markup for the input element looks like so:
<input accept="image/*" title="Choose an image with a 250 x 300 pixel resolution." data-id="2" name="prod_img2" id="prod_img2" type="file" >
var selectedFile = $('#prod_img' + id).files[0];
files is a property of a DOM element, not a jQuery object. You need to extract the DOM element from the jQuery object that wraps it:
$('#prod_img' + id)[0].files
I got my code to work by adding an event variable like so:
$('body').delegate('[id^="prod_img_"]', 'change', function(event)
{
event.preventDefault();
var id = $(this).data('id');
var reader = new FileReader();
var selectedFile = event.target.files[0];
reader.onload = function (e) {
var imageSrc = e.target.result;
$('#img_prod' + id).attr('src', imageSrc);
};
reader.readAsDataURL(selectedFile);
});
I created a button where when clicked on creates another button but Iam not sure how to make an onclick event for that button
function boyFunction(){
var btn1 = document.createElement("BUTTON");
var x = document.createTextNode("basketball");
btn1.appendChild(x);
document.body.appendChild(btn1);
btn1.classList.add('btn1');
}
I want to be able to click the basketball button and have that button show an image
Three things had to be done.
First your new element will need an id
btn1.setAttribute("id", "myButton");
click event handler will need to be created for your new element
document.getElementById("myButton").addEventListener("click", myButtonClickHandler);
and then you will define your click handler in a new function
function myButtonClickHandler {
// my code
}
Your code after doing the above change will look like below:
function boyFunction(){
var btn1 = document.createElement("BUTTON");
btn1.setAttribute("id", "myButton");
var x = document.createTextNode("basketball");
btn1.appendChild(x);
document.body.appendChild(btn1);
btn1.classList.add('btn1');
document.getElementById("myButton").addEventListener("click", myButtonClickHandler);
}
function myButtonClickHandler {
// my code
}
You can add an Click Handler like this:
document.getElementById('button').onclick = function() {
alert("button was clicked");
};
of course you need to give your new button the id 'button' or any other id you choose
You can simply do this
function boyFunction(){
var btn1 = document.createElement("BUTTON");
btn1.addEventListener('click',()=>console.log('clicked'));
var x = document.createTextNode("basketball");
btn1.appendChild(x);
document.body.appendChild(btn1);
btn1.classList.add('btn1');
}
Can work like this:
function boyFunction(){
var btn1 = document.createElement("BUTTON");
// your "onclick function" goes here
btn1.onclick = function () { };
var x = document.createTextNode("basketball");
btn1.appendChild(x);
document.body.appendChild(btn1);
btn1.classList.add('btn1');
}
const googleDiv = function(){
const container = document.createElement('div');
const btnEle = document.createElement('button');
btnEle.type = "button";
btnEle.className = "link-btn";
btnEle.appendChild(document.createTextNode("(Unlink)"));
btnEle.onclick = "unlinkGoogle()";
container.appendChild(btnEle);
container.id = "google-linked-container";
return container;
};
When I create a button via this method, the button appears in the DOM no problem and the button type and classes are as expected, but there is no onclick attribute. Why?
P.S.
btnEle.addEventListener("click", () => { console.log("clicked!"); }); doesn't work either.
Update
I have replicated it on JSFiddle: https://jsfiddle.net/fs1xhgnm/2/
You should assign your handler as a function, instead of string. Also, try to assign onclick handler after the element is appended.
container.appendChild(btnEle);
btnEle.onclick = unlinkGoogle;
You need to pass a reference to the function, either with the onclick, or the better addEventListener
const googleDiv = function() {
const container = document.createElement('div');
const btnEle = document.createElement('button');
btnEle.type = "button";
btnEle.className = "link-btn";
btnEle.appendChild(document.createTextNode("(Unlink)"));
btnEle.addEventListener('click', unlinkGoogle);
container.appendChild(btnEle);
container.id = "google-linked-container";
return container;
};
function unlinkGoogle() {
console.log('clicked');
}
document.body.appendChild(googleDiv());
You are assigning a string as the function. You can use addEventListener.
Here is a JSFiddle to explain what I mean.
I have this text box
<textarea rows="20" cols="100"> </textarea>
When someones enters text into it and refreshes the page how do I make the text inputted stay there
I would attempt something myself but I do not know where to start...
You can do it using Jquery and local storage like this. See fiddle https://jsfiddle.net/sxh0n7d1/13/
This will work with multiple <textarea>'s
window.onbeforeunload = function() {
$('textarea').each(function(){
var id = $(this).attr('id');
var value = $(this).val();
localStorage.setItem(id, value);
});
}
window.onload = function() {
$('textarea').each(function(){
var id = $(this).attr('id');
var text2 = localStorage.getItem(id);
if (text2 !== null) $('#'+id).val(text2);
});
}
I have created a button dynamically in HTML5 + Javascript. I have assigned a click event to that button. When i clicked it, it's content & background color should change. Content is changing fine, but bgcolor is not changing.
my code is;
<style>
.selectBtn{ height:60px;width:80px;background-color:yellow; }
</style>
<script>
var container = document.getElementById('abc');
function dx(){
var Btn = document.createElement('button');
Btn.type = 'button';
Btn.className = 'selectBtn';
Btn.innerHTML = 'SUBMIT';
container.appendChild(Btn);
Btn.onclick = function()
{
this.innerHTML='voted';
this.style.backgroundColor:'blue';
}
dx();
</script>
<body><div id='abc'></div></body>
Use = instead of colon. Use this:-
this.style.backgroundColor = "#f47121";
You will wan't to change some things
var container = document.getElementById('abc');
function dx(){
var Btn = document.createElement('button');
Btn.className = 'selectBtn';
Btn.innerHTML = 'SUBMIT';
container.appendChild(Btn);
Btn.onclick = function() {
this.innerHTML='voted';
this.style.backgroundColor = 'blue';
}
}
I'm not sure if Btn.type = 'button'; is valid but it sure is pointless
and on the style you want to change : to = you only use : in objects
Also you might wan't to use textContent instead of innerHTML
I could not resist to show how I would have done this, just for fun, and its educational purposes.
window.onload = function(){
(function(){
var doc = document;
var get = function(id){return doc.getElementById(id);};
var inject = function(el,str){el.innerHTML = str;return el;};
inject(get('content'),'<button type="button" id="btn-select">SUBMIT</button>');
get('btn-select').onclick = function(){inject(this,'Voted!').className = 'voted';};
})();
};
DEMO: http://jsfiddle.net/ZNfBe/