/    Sign up×
Community /Pin to ProfileBookmark

Javascript events problem

Copy linkTweet thisAlerts:
May 02.2008

Hello!

I am trying to create a WYSIWYG editor. I want to create a menu for selecting the font. For this I created a div (with absolute position) that contains the fonts. This div is hidden unless I click on a button (when I press the button the div becomes visible). I also attached the onMouseDown event of the document to a function that puts the div back to hidden. The problem is that when I select a font from the list, the onClick event does not fire. The only event that is fired is the onMouseDown of the document. How can I resolve the problem?

Thanks,
Stefan Filip

to post a comment
JavaScript

3 Comments(s) ↴

Copy linkTweet thisAlerts:
@ZeroKilledMay 02.2008 — can we see your code, site or part of your code so we can guide you on the right direction...?
Copy linkTweet thisAlerts:
@stefi_roauthorMay 02.2008 — Hi ZeroKilled,

Thanks for your quick reply. Here's the part that I think you want to see:
<i>
</i>function Start(controlName)
{
parentName = controlName;
textAreaName = parentName + '_textArea';
document.getElementById(textAreaName).contentWindow.document.designMode = "on";
sourceView=false;
InitToolbarButtons();
InitFontPalette();

<i> </i>if (document.addEventListener)
<i> </i>{
<i> </i> addEventListener(dismissfontpalette);
<i> </i>}
<i> </i>else if (document.attachEvent)
<i> </i>{
<i> </i> attachEvent(dismissfontpalette);
<i> </i>}
}

function dismissfontpalette(e)
{
document.getElementById(parentName+'_fontpalette').style.visibility="hidden";
return false;
}

function addEventListener(funct)
{
document.addEventListener("mousedown", funct, true);
document.getElementById(textAreaName).contentWindow.document.addEventListener("mousedown", funct, false);
document.addEventListener("keypress", funct, true);
document.getElementById(textAreaName).contentWindow.document.addEventListener("keydown", funct, false);
}

function attachEvent(funct)
{
document.attachEvent("onmousedown", funct, true);
document.getElementById(textAreaName).contentWindow.document.attachEvent("onmousedown", funct, false);
document.attachEvent("onkeydown", funct, true);
document.getElementById(textAreaName).contentWindow.document.attachEvent("onkeydown", funct, false);
}

function selectFont()
{
var fontName = this.id;
var name=fontName.split('-')[1].replace(/_/g,' ');
alert(name);
}


And this is how the div is defined:

<i> </i>&lt;div id="fontpalette" runat="server" class="fontpallete"&gt;
<i> </i> &lt;table&gt;
<i> </i> &lt;tr&gt;
<i> </i> &lt;td class="fontbutton" id="font-Arial" onclick="selectFont();"&gt;
<i> </i> &lt;span style="font-family:Arial;"&gt;Arial&lt;/span&gt;
<i> </i> &lt;/td&gt;
<i> </i> &lt;/tr&gt;
<i> </i> &lt;tr&gt;
<i> </i> &lt;td class="fontbutton" id="font-Courier_New" onclick="selectFont();"&gt;
<i> </i> &lt;span style="font-family:Courier New;"&gt;Courier New&lt;/span&gt;
<i> </i> &lt;/td&gt;
<i> </i> &lt;/tr&gt;
<i> </i> &lt;tr&gt;
<i> </i> &lt;td class="fontbutton" id="font-Georgia" onclick="selectFont();"&gt;
<i> </i> &lt;span style="font-family:Georgia;"&gt;Georgia&lt;/span&gt;
<i> </i> &lt;/td&gt;
<i> </i> &lt;/tr&gt;
<i> </i> &lt;tr&gt;
<i> </i> &lt;td class="fontbutton" id="font-Times_New_Roman" onclick="selectFont();"&gt;
<i> </i> &lt;span style="font-family:Times New Roman;"&gt;Times New Roman&lt;/span&gt;
<i> </i> &lt;/td&gt;
<i> </i> &lt;/tr&gt;
<i> </i> &lt;tr&gt;
<i> </i> &lt;td class="fontbutton" id="font-Verdana" onclick="selectFont();"&gt;
<i> </i> &lt;span style="font-family:Verdana;"&gt;Verdana&lt;/span&gt;
<i> </i> &lt;/td&gt;
<i> </i> &lt;/tr&gt;
<i> </i> &lt;/table&gt;
<i> </i>&lt;/div&gt;
Copy linkTweet thisAlerts:
@ZeroKilledMay 02.2008 — problem is in function [B]selectFont[/B], specially first line statement: [B]var fontName = this.id;[/B]. depending on where is defined the function, the [B]this[/B] keyword refer to different object. in this case, since [B]selectFont[/B] is defined on top object level (that is, window object), [B]this[/B] refer to the window. if the function were defined on an element's event, then [B]this[/B] refer to that element.

to fix it, give the function an argument and pass the [B]this[/B] value as argument on each onclick event:
<i>
</i>function selectFont([B]obj[/B]){
var fontName = [B]obj[/B].id;
var name=fontName.split('-')[1].replace(/_/g,' ');
alert(name);
}


[code=html]
<td class="fontbutton" id="font-Courier_New" onclick="selectFont(this);">
[/code]

also, maybe you might want to read about this keyword on javascript
×

Success!

Help @stefi_ro spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.15,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...