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/
Related
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 a video for which I want to provide a download link. However, having created a simple Download tag, when I click on it (in Firefox & Chrome) it starts playing the video instead of allowing the video to be downloaded. Is there a way that works in all current browsers to force them to offer the save-as dialog?
Try using the download attribute.
<a href="myvideo.mp4" download>Download</a>
More at:
http://www.w3schools.com/tags/att_a_download.asp
you should also try this.
if (isVideo) {
var div = document.createElement('div');
div.className = "column";
var vid = document.createElement('video');
var source = document.createElement('source');
source.type = "video/mp4";
source.src = display_src;
vid.appendChild(source);
vid.poster;
vid.controls = true;
var alink = document.createElement('a');
alink.href = display_src;
alink.id = 'downlo_click';
}
alink.text = "Repost"
// window.open(alink, '_self');
div.appendChild(vid);
div.appendChild(alink);
document.getElementById('gamediv').appendChild(div)
document.getElementById('downlo_click').addEventListener('click', function() {
var x = new XMLHttpRequest();
x.open("GET", display_src, true);
x.responseType = 'blob';
x.onload = function(e) {
download(x.response, "abcd.mp4", "video/mp4");
}
x.send();
// window.open(alink, '_self');
// download("data:text/html,"display_src, display_src);
});
}
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
});
sorry the title may be confusing, but what I am trying to do is dynamically change a class based on a button click. However, this works on every tag except the ons-button that calls the changToRed function.
<div ng-controller="clickCtrl">
<ons-button ng-class="dynamic" ng-click="changeToRed()">Red</ons-button>
</div>
Here is my main.js file:
var myApp = angular.module('myApp');
myApp.controller('clickCtrl', function($scope){
$scope.dynamic = "blue";
$scope.changeToRed = function(){
$scope.dynamic = "red";
}
$scope.changeToGreen = function(){
$scope.dynamic = "green";
}
$scope.changeToBlue = function(){
$scope.dynamic = "blue";
}
});
Thanks,
Ben
ons-button is using ng-class internally. If you don't need the spinner animation, you can just use the class version.
<button ng-class="dynamic" ng-click="changeToRed()" class="topcoat-button">Red</button>
You also need to add !important to your css.
.red {
background-color: red !important;
}
It is an issue with AngularJS' scope. It is a long article, but the part you need is about scope dot notation. Change your controller to this:
var myApp = angular.module('myApp');
myApp.controller('clickCtrl', function($scope){
$scope.model = {};
$scope.model.dynamic = "blue";
$scope.changeToRed = function(){
$scope.model.dynamic = "red";
}
$scope.changeToGreen = function(){
$scope.model.dynamic = "green";
}
$scope.changeToBlue = function(){
$scope.model.dynamic = "blue";
}
});
And then change your HTML to this:
<div ng-controller="clickCtrl">
<ons-button ng-class="model.dynamic" ng-click="changeToRed()">Red</ons-button>
</div>
i have a script that changes the current image with the selected image but i need to insert an attribute so that it targets the image tag with only that class
CODE----
<script>
$(function(){
Test = {
UpdatePreview: function(obj){
// if IE < 10 doesn't support FileReader
if(!window.FileReader){
// don't know how to proceed to assign src to image tag
} else {
var reader = new FileReader();
var target = null;
reader.onload = function(e) {
target = e.target || e.srcElement;
$("img").attr(".the_pre_prev").prop("src", target.result);// tried $("img").attr("CLASS NAME").prop("src", target.result)
};
reader.readAsDataURL(obj.files[0]);
}
}
};
});
If you want to target an image with an specific class, you can simply do (assuming you're using jQuery):
$("img.the-class").attr("src", target.result)
See the jQuery class selector for reference.