Solved

Accumulator in Javascript

Posted on 2004-03-27
9
1,017 Views
Last Modified: 2012-05-04
I have a htm page in which i wanted to implement the accumulator functionality. i have a "Textbox" and two image buttons "Add, Remove" and a " Textarea". When the user clicks the "Add" button, the value in the "Textbox" should come into the "Textarea". When the user selects a value in the "TextArea", and hit "Remove" button, the number should be removed from the "TextArea". Is is possible to implement this functionality using Javascript?

Thanks,
Ragz
0
Comment
Question by:babasri101
  • 3
  • 2
  • 2
  • +2
9 Comments
 
LVL 75

Expert Comment

by:Michel Plungjan
Comment Utility
Not easily.
the second part is hard and needs a textrange

What is the aim of the page?
0
 
LVL 31

Expert Comment

by:GwynforWeb
Comment Utility

<a href='#' onClick= "document.getElementById('taName').focus();execCommand('Cut');return false">
<img src='http://www.experts-exchange.com/images/pe/143475.jpg' >
</a>Delete<p>

<a href='#' onClick="document.getElementById('taName').value +=document.getElementById('txtName').value+'\n';return false">
<img src='http://www.experts-exchange.com/images/pe/143475.jpg' >
</a>Add<p>


<input type=text name=txtName>
<p>
<textarea rows=5 width=20 id='taName'>
</textarea>
0
 
LVL 75

Expert Comment

by:Michel Plungjan
Comment Utility
Okeee... I am not sure I want to be a button ;)
0
 
LVL 31

Expert Comment

by:GwynforWeb
Comment Utility
:-), it is a very nice button though. (I just picked the closest picture, :-)  )
0
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 
LVL 31

Accepted Solution

by:
GwynforWeb earned 250 total points
Comment Utility
I am not sure exactly what is wanted here but here is another try

<script>
function del(){
document.getElementById('taName').focus();
document.execCommand('Cut')
document.getElementById('taName').innerHTML=document.getElementById('taName').innerHTML.replace(/\n\n/,'\n')
}

function add(){
document.getElementById('taName').value +=document.getElementById('txtName').value+'\n'
}

</script>

<a href='#' onClick= "del();return false">
<img src='http://www.experts-exchange.com/images/pe/143475.jpg'  >
</a>Delete<p>

<a href='#' onClick="add();return false">
<img src='http://www.experts-exchange.com/images/pe/143475.jpg' >
</a>Add<p>


<input type=text name=txtName>
<p>
<textarea rows=8 width=20 id='taName'>
</textarea>
0
 
LVL 25

Assisted Solution

by:devic
devic earned 250 total points
Comment Utility
here an example:
====================
<script>
function addVal(obj)
{
      obj.cont.value+=obj.utext.value+"\n";
}
function remVal(obj)
{
      contArr=obj.cont.value.replace(/\r/g,"").split("\n");
      obj.cont.value="";
      for(var i=0;i<contArr.length;i++)
      {
            if(contArr[i]!=obj.utext.value)
            obj.cont.value+=contArr[i]+"\n";
      }
}
</script>
<form>
      <input name=utext value="me">
      <input type=button value=add onclick=addVal(this.form)>
      <input type=button value=remove onclick=remVal(this.form)><br><br>
      <textarea name=cont rows=10></textarea>
</form>
0
 
LVL 25

Assisted Solution

by:devic
devic earned 250 total points
Comment Utility
sorry, i didn't read good the question:

in this case i would use this:
===================
<script>
function addVal(obj)
{
      obj.cont.length++;
      obj.cont[obj.cont.length-1].text=obj.utext.value;
}
function remVal(obj)
{
      for(var i=0;i<obj.cont.length;i++)
      {
            if(obj.cont[i].text==obj.cont[obj.cont.selectedIndex].text)
            obj.cont[i]=null;
      }
}
</script>
<form>
      <input name=utext value="me">
      <input type=button value=add onclick=addVal(this.form)>
      <input type=button value=remove onclick=remVal(this.form)><br><br>
      <select name=cont size=10 style=width:300px>
      </select>
</form>
0
 
LVL 63

Expert Comment

by:Zvonko
Comment Utility
Here my proposal:


<html>
<head>
<script>
function addVal(theImg){
  theForm = theImg.form;
  if(theForm.TextBox.value>""){
    areaValue = theForm.TextArea.value;
    if(areaValue>"" && areaValue.substr(areaValue.length-1)>" "){
      areaValue += " ";
    }
    theForm.TextArea.value = areaValue + theForm.TextBox.value;
  }
}
function delVal(){
  rng = document.selection.createRange();
  if(rng){
    rng.text = "";
  }
}
</script>
</head>
<body>
<form>
    <input type=text name="TextBox" value="word">
    <input type=image src="add.gif" onclick="addVal(this);return false">
    <input type=image src="del.gif" onclick="delVal();return false">
<hr>
    <textarea name="TextArea" rows="8" cols="80">Some words</textarea>
</form>
</body>
</html>



0
 

Author Comment

by:babasri101
Comment Utility
Thank u all u guys ...it was of great help
ragz
0

Featured Post

Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

Join & Write a Comment

This article shows how to create and access 2-dimensional arrays in JavaScript.  It includes a tutorial in case you are just trying to "get your head wrapped around" the concept and we'll also look at some useful tips for more advanced programmers. …
In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

728 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now