Simple Notepad

Simple notepad using javascript

Page 1 of 1

9 Replies - 8206 Views - Last Post: 05 March 2009 - 04:54 PM

#1 saquib1992  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 18
  • Joined: 31-January 09

Simple Notepad

Posted 25 February 2009 - 09:41 AM

Code is not working please help.

<HTML>
<TITLE>Simple Notepad</TITLE>
<HEAD>
<script>
function load_text(){
document.getElementById("output").value = "Text....";
}
function clearTextArea() {

document.getElementById("output").value = "";
}
function bold_click(){
document.getElementById("output").style.font.weight = "Bold";
}
function underline_click(){
document.getElementById("output").style.font.decoration = "Underline";
}
function italic_click(){
document.getElementById("output").style.font.style = "Italic";
}

</SCRIPT>
</HEAD>
<BODY onload="load_text()">
<FORM NAME="controls" ID="controls">
<SELECT style="WIDTH: 310px">
<OPTION selected>Fonts</OPTION>
<OPTION>Arial Black</OPTION>
</SELECT>
<INPUT id=button1 type=button value="B" name=button1 style="FONT-WEIGHT: bold; WIDTH: 26px; HEIGHT: 24px" size=28 onclick="bold_click()"> 
<INPUT type=button value="I" style="WIDTH: 25px; FONT-STYLE: italic; HEIGHT: 24px" size=30 onclick="italic_click()"> 
<INPUT id=button1 style="WIDTH: 26px; HEIGHT: 24px; TEXT-DECORATION: underline" type=button size=8 value=U name=button1 onclick="underline_click()">
<BR><TEXTAREA style="WIDTH: 399px; HEIGHT: 182px" name=output rows=9 wrap=virtual cols=48></TEXTAREA><BR>
<P align="centre"><INPUT TYPE="button" VALUE="Clear" onclick="clearTextArea()"></P>
</FORM>
</BODY>
</HTML>



Is This A Good Question/Topic? 0
  • +

Replies To: Simple Notepad

#2 Winstinology  Icon User is offline

  • I'm pretty good with a laser mouse..
  • member icon

Reputation: 7
  • View blog
  • Posts: 958
  • Joined: 08-May 08

Re: Simple Notepad

Posted 25 February 2009 - 10:51 AM

I got it working for ya! And I'll tell you why.

It was really quite simple actually.. You want to always make sure that you put all of your values inside "quotes". If you put some of them in quotes, and some of them without, your kind of messing with the browsers head (metaphorically speaking). Once I added quotes to all of your html values it seems to be working fine. :)

Javascript seems to be functioning correctly from what I can see. Looks great too!

Also, just cleared up a couple of typos. Keep a close eye on all of your code.

I hope this helps you!! :)

<HTML>
<TITLE>Simple Notepad</TITLE>
<HEAD>

<script>
function load_text(){
document.getElementById("output").value = "Text....";
}
function clearTextArea() {

document.getElementById("output").value = "";
}
function bold_click(){
document.getElementById("output").style.font.weight = "Bold";
}
function underline_click(){
document.getElementById("output").style.font.decoration = "Underline";
}
function italic_click(){
document.getElementById("output").style.font.style = "Italic";
}

</SCRIPT>
</HEAD>

<BODY onload="load_text()">

<FORM NAME="controls" ID="controls">
<SELECT style="WIDTH: 310px">
<OPTION selected>Fonts</OPTION>
<OPTION>Arial Black</OPTION>
</SELECT>

<INPUT id="button1" type="button" value="B" name="button1" style="FONT-WEIGHT: bold; WIDTH: 26px; HEIGHT: 24px" size="28" onclick="bold_click()">

<INPUT type="button" value="I" style="WIDTH: 25px; FONT-STYLE: italic; HEIGHT: 24px" size="30" onclick="italic_click()">

<INPUT id="button1" style="WIDTH: 26px; HEIGHT: 24px; TEXT-DECORATION: underline" type="button" size="8" value="U" name="button1" onclick="underline_click()">

<BR/><TEXTAREA style="WIDTH: 399px; HEIGHT: 182px" name="output" rows="9" wrap="virtual" cols=48></TEXTAREA><BR>

<P align="center"><INPUT TYPE="button" VALUE="Clear" onclick="clearTextArea()"></P>
</FORM>

</BODY>
</HTML>
 


I take that back actually. Your Javascript has some quirks.. Let me see what I can do.
Was This Post Helpful? 0
  • +
  • -

#3 Winstinology  Icon User is offline

  • I'm pretty good with a laser mouse..
  • member icon

Reputation: 7
  • View blog
  • Posts: 958
  • Joined: 08-May 08

Re: Simple Notepad

Posted 25 February 2009 - 11:16 AM

Okay, so I went back through and looked at your javascript. You were pretty close, you just had some slight syntax errors in your DOM styles code.

I also added a 'N' button for normal, so you can change back the styles on the text.

I recommend you check out a great website, http://www.w3schools.com. Here you'll find pretty much everything you need to get started in learning just about all things web development.

I hope I've helped you! :)

 
<HTML>
<TITLE>Simple Notepad</TITLE>
<HEAD>

<script>
function load_text(){
document.getElementById("output").value = "Text....";
}

function bold_click(){
document.getElementById("output").style.fontWeight = "bold";
}

function underline_click(){
document.getElementById("output").style.textDecoration = "Underline";
}

function italic_click(){
document.getElementById("output").style.fontStyle = "Italic";
}

function normal_click(){
document.getElementById("output").style.fontStyle = "Normal";
document.getElementById("output").style.textDecoration = "None";
document.getElementById("output").style.fontWeight = "Normal";
}

</SCRIPT>
</HEAD>

<BODY onload="load_text()">

<FORM NAME="controls" ID="controls">
<SELECT style="WIDTH: 310px">
<OPTION selected>Fonts</OPTION>
<OPTION>Arial Black</OPTION>
</SELECT>

<INPUT id="button1" type="button" value="B" name="button1" style="FONT-WEIGHT: bold; WIDTH: 26px; HEIGHT: 24px" size="28" onclick="bold_click()">

<INPUT type="button" value="I" style="WIDTH: 25px; FONT-STYLE: italic; HEIGHT: 24px" size="30" onclick="italic_click()">

<INPUT id="button1" style="WIDTH: 26px; HEIGHT: 24px; TEXT-DECORATION: underline" type="button" size="8" value="U" name="button1" onclick="underline_click()">

<INPUT id="button1" style="WIDTH: 26px; HEIGHT: 24px;" type="button" size="8" value="N" name="button1" onclick="normal_click()">

<BR/><TEXTAREA style="WIDTH: 399px; HEIGHT: 182px" id="output" name="output" rows="9" wrap="virtual" cols=48></TEXTAREA><BR>

<P align="center"><INPUT TYPE="reset" VALUE="Clear"></P>
</FORM>



</BODY>
</HTML>



Was This Post Helpful? 0
  • +
  • -

#4 JMRKER  Icon User is online

  • D.I.C Addict

Reputation: 124
  • View blog
  • Posts: 815
  • Joined: 25-October 08

Re: Simple Notepad

Posted 25 February 2009 - 04:37 PM

Still have some syntax problems.

ID values must be unique. Therefore id="button1" for several elements needs to be fixed

Should also change to:
<script type="text/javascript">

Does not seem to do much more than <textarea> alone (?)

This post has been edited by JMRKER: 25 February 2009 - 04:39 PM

Was This Post Helpful? 0
  • +
  • -

#5 saquib1992  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 18
  • Joined: 31-January 09

Re: Simple Notepad

Posted 25 February 2009 - 11:43 PM

Thanks for supporting.
Was This Post Helpful? 0
  • +
  • -

#6 saquib1992  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 18
  • Joined: 31-January 09

Re: Simple Notepad

Posted 26 February 2009 - 12:15 AM

View PostJMRKER, on 25 Feb, 2009 - 03:37 PM, said:

Still have some syntax problems.

ID values must be unique. Therefore id="button1" for several elements needs to be fixed

Should also change to:
<script type="text/javascript">

Does not seem to do much more than <textarea> alone (?)



Thanks for the advice but javascript is the default scripting language.
Was This Post Helpful? 0
  • +
  • -

#7 saquib1992  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 18
  • Joined: 31-January 09

Re: Simple Notepad

Posted 26 February 2009 - 12:21 AM

I also want to change font by clicking the font. And also i want to change the selected text only . how can we do it please help.
Was This Post Helpful? 0
  • +
  • -

#8 Lapixx  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 05-March 09

Re: Simple Notepad

Posted 05 March 2009 - 03:05 PM

That's something you can't do in a simple textarea. You'll need a WYSIWYG editor of some kind instead. I will not recommend you to make one yourself, although the basics look simple it can be hard to get everything working properly. Instead, search for tinyMCE for example.
Was This Post Helpful? 0
  • +
  • -

#9 JMRKER  Icon User is online

  • D.I.C Addict

Reputation: 124
  • View blog
  • Posts: 815
  • Joined: 25-October 08

Re: Simple Notepad

Posted 05 March 2009 - 04:47 PM

Should also change to:
<script type="text/javascript">

View Postsaquib1992, on 25 Feb, 2009 - 11:15 PM, said:

Thanks for the advice but javascript is the default scripting language.

That statement may be true now (I think not)
but I would not plan on it being that way forever.

When you have a problem in the future because you did
not specify the scripting language to be used,
don't blame me for the lost de-bug time you spend fixing the problem!

It costs very little to do it right but will cost you a lot later and probably won't validate.

This post has been edited by JMRKER: 05 March 2009 - 04:49 PM

Was This Post Helpful? 0
  • +
  • -

#10 Lapixx  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 05-March 09

Re: Simple Notepad

Posted 05 March 2009 - 04:54 PM

True, you can build a house without bricks too, but I wouldn't really recommend it.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1