I'm trying to create an element onclick and hide the element when it is clicked but it does nothing?
Why does the hide() function do nothing?
<script type="text/javascript">
function show(){
var a = document.getElementById('foo');
var b = document.createElement("div");
b.setAttribute('id', 'bar');
b.setAttribute('onclick', 'hide()');
a.appendChild(b);
b.innerHTML = 'TEXT CONTENT';
b.onclick = function() {
hide();
};
}
function hide() {
var x = document.getElementById('foo');
var z = document.getElementById('bar');
x.removeChild(z);
}
</script>
<div id="foo" onclick="show()">CLICK ME</div>
Add
b.onclick = function() {hide();};
If this is occurring under IE, then see Stackoverflow - Why does an onclick property set with setAttribute fail to work in IE?
you can use jquery method to register function it will work in both IE,FF
A sample for u
$(b).click(function() {
//call your function like hide() i have made a separate function for cleaner code and re usability
});
function hide()
{
}
Related
Here I have a html
<div style="width: 200px;height:200px;padding:50px;background-color: lightcyan" id="maindiv" onclick="subdiv()"></div>
And javascript function for greating a subdiv
function subdiv() {
var p = document.getElementById('maindiv');
var s = document.createElement('div');
s.setAttribute('id','subdiv');
p.appendChild(s);
var s2 = document.getElementById('subdiv');
s2.style.height = '100px';
s2.style.width = '100px';
s2.style.backgroundColor = 'green';
}
And here I want to do an event outside document.getElementById('subdiv'):
document.addEventListener('click',function() {
alert('hello world');
});
How to avoid the alert('hello world') reaction on clicking the subdiv, and how to do, that works EXACTLY ONCE in every click outside the subdiv? I like possible simple response without a jquery. https://jsfiddle.net/hx2u6j35/
Thank you.
Div tag is not properly append to the maindiv so I have created myself and preventing child tag from calling parent function
function subdiv() {
var p = document.getElementById('maindiv');
var s = document.createElement('div');
s.setAttribute('id', 'subdiv');
s.setAttribute('onclick', 'return false;');
p.appendChild(s);
var s2 = document.getElementById('subdiv');
s2.style.height = '100px';
s2.style.width = '100px';
s2.style.backgroundColor = 'green';
}
document.addEventListener('click', function() {
alert('hello world');
});
$("#subdiv").on('click', function(e) {
alert("subdiv");
return false; //THIS WON'T CALL PARENT FUNCTION OR YOU CAN USE e.stopPropagation
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="width: 200px;height:200px;padding:50px;background-color: lightcyan" id="maindiv" onclick="subdiv()">
<div id="subdiv" style="height:100px;width:100px;background-color:green"></div>
</div>
Use event.target to grab the Element on which event is invoked.
function subdiv() {
var p = document.getElementById('maindiv');
var s = document.createElement('div');
s.setAttribute('id', 'subdiv');
p.appendChild(s);
var s2 = document.getElementById('subdiv');
s2.style.height = '100px';
s2.style.width = '100px';
s2.style.backgroundColor = 'green';
}
document.addEventListener('click', function(e) {
if (e.target.id == 'maindiv') {
alert('hello world');
}
});
<div style="width: 200px;height:200px;padding:50px;background-color: lightcyan" id="maindiv" onclick="subdiv()"></div>
You need to disable event-capturing by passing another argument to the event handler
document.addEventListener('click',function() {
alert('hello world');
}, false);
First, you have an error when running this code.. The subdiv function is not available for the "onclick" function..
Get rid of the onclick attribute by using this :
document.addEventListener('click',function( _event ) {
if( _event.target.id === "maindiv" ){
subdiv();
}else{
alert('hello world');
}
});
With this, you can avoid anything when you want..
Trying to write a basic jQuery plugin:
HTML:
<textarea>
<p>Hello World!</p>
</textarea>
jQuery:
$.fn.wysiwyg = function (options) {
var e = $(this).replaceWith("<iframe>");
console.log($(this)[0].contentDocument);
};
$("textarea").wysiwyg();
JSFIDDLE DEMONSTRATION
The Problem
var e = $(this).replaceWith("<iframe>");
console.log($(this)[0].contentDocument);
I am getting undefined at the console. If I set an id attribute to this iframe and target that id in console.log method, it works perfectly, but I want to use $(this). What can be done for this?
The problem is this will still refer to the textarea so
$.fn.wysiwyg = function (options) {
var $frame = $("<iframe>")
var e = $(this).replaceWith($frame);
console.log($frame[0].contentDocument);
};
Demo: Fiddle
Try This:
$.fn.wysiwyg = function (options) {
var $e = $("<iframe>");
this.replaceWith($e);
console.log($e);
};
$("textarea").wysiwyg();
:: JsFiddle ::
I have a div that I'm appending to another div when a button is clicked. I'm also calling a bunch of functions on the div that gets created.
HTML
<a onClick="drawRect();">Rect</a>
JS
function drawRect(){
var elemRect = document.createElement('div');
elemRect.className = 'elem elemRect';
elemRect.style.position = "absolute";
elemRect.style.background = "#ecf0f1";
elemRect.style.width = "100%";
elemRect.style.height = "100%";
elemRect.style.opacity = "100";
renderUIObject(elemRect);
$('.elemContainer').draggableParent();
$('.elemContainer').resizableParent();
makeDeselectable();
handleDblClick();
}
var createDefaultElement = function() {
..
..
};
var handleDblClick = function() {
..
..
};
var renderUIObject = function(object) {
..
..
};
var makeDeselectable = function() {
..
..
};
I could clone the element when the browser detects a keydown event
$(window).keydown(function(e) {
if (e.keyCode == 77) {
$('.ui-selected').clone();
return false;
}
});
then append it to #canvas. But the problem is, none of the functions I mentioned above get called with this method.
How can I copy/paste an element (by pressing CMD+C then CMD+V) and call those above functions on the cloned element?
The jQuery.clone method returns the cloned node. So you could adjust your code to do something like this:
var myNodes = $('.ui-selected').clone();
myNodes.each(function () {
createDefaultElement(this);
appendResizeHandles(this);
appendOutline(this);
});
Preamble: I'm Italian, sorry for my bad English.
This is my problem:
I want to assign a function to a set of buttons.
I need to send a parameter to the function.
this is the code that I've tried:
function test(atxt) {
var buttons = $('.tblButton');
for (var i = 0; i < buttons.length; i++) {
buttons[i].onClick(sayHello(atxt));
}
}
function sayHello(txt){alert('hello' + txt)};
...getting the following error:
Uncaught TypeError: Object #<HTMLButtonElement> has no method 'onClick'
can you tell me where I went wrong and how can I fix it?
EDIT: I need iteration because I need the 'id of the button as a parameter of the function so i need to do buttons[i].onClick(sayHello(buttons[i].id))
buttons[i].onClick(sayHello(atxt));
Supposed to be
$(buttons[i]).on('click', function() { sayHello(atxt) });
If you want to get the current button id then I think you are looking for this..
for (var i = 0; i < buttons.length; i++) {
$(buttons[i]).on('click', function() { sayHello(this.id) });
}
If you want to iterate through all of the buttons then you have to do that with .each() handler of the jquery:
$(function(){
$(".tblButton").each(function () {
$(this).click(function(){
alert($(this).attr('id'));
});
});
});
checkout the jsbin: http://jsbin.com/usideg/1/edit
Would this not work for your example: Do you have another reason for the iteration?
function test(atxt) {
$('.tblButton').on('click',function(){sayHello(atxt);});
}
function sayHello(txt){alert('hello' + txt)};
OR optionally if the elements are static and present:
function test(atxt) {
$('.tblButton').click(function(){sayHello(atxt);});
}
function sayHello(txt){alert('hello' + txt)};
Alternate approach: just change
to this style:
var txt = "fred";
var atext = "hello" + txt;
function sayHello(atext) {
alert(atext);
}
$('.tblButton').on('click', function() {
sayHello(atext);
});
//below here just to demonstrate
$('.tblButton').eq(0).click();//fires with the fred
txt = "Johnny";// new text
atext = 'hello' + txt;
$('.tblButton').eq(1).click();//fires the Johnny
see it working here:
http://jsfiddle.net/dFBMm/
SO based on your note:
this markup and code:
<button class="tblButton" id="Ruth">Hi</button>
<button class="tblButton" id="Betty">Hi again</button>
$('.tblButton').on('click', function() {
alert("Hello "+$(this).attr("id"));
});
$('.tblButton').eq(0).click();//fires with the Ruth
$('.tblButton').eq(1).click();//fires the Betty
http://jsfiddle.net/dFBMm/1/
How to call javascript onmouseout event in javascript code?
I.e.:
var div=document.getElementById('new');
if(div.mouseout)
document.getElementById('new').style.visibility='hidden';
Thanks.
I think you want:
var div = document.getElementById("new");
div.onmouseout = function (e)
{
this.style.visibility = "hidden";
}
var div = document.getElementById("new");
div.mouseout = function()
{
this.style.display='none';
}
window.onload = function(){
var div=document.getElementById('new');
div.onmouseout = function(){
this.style.visibility='hidden';
};
};
You can use this keyword to specify the current element, no need to again fetch the element using document.getElementById.
Working Demo