Solved

Accumulator in Javascript

Posted on 2004-03-27
9
1,025 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
ID: 10694097
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
ID: 10694289

<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
ID: 10694332
Okeee... I am not sure I want to be a button ;)
0
Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 
LVL 31

Expert Comment

by:GwynforWeb
ID: 10694430
:-), it is a very nice button though. (I just picked the closest picture, :-)  )
0
 
LVL 31

Accepted Solution

by:
GwynforWeb earned 250 total points
ID: 10694705
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
ID: 10695178
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
ID: 10695266
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
ID: 10696232
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
ID: 10696395
Thank u all u guys ...it was of great help
ragz
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

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. …
Avoid defining the variables in the global scope; trying to define them in a local function scope. Because:   • Look-up is performed every time a variable is accessed.   • Variables are resolved backwards from most specific to least specific scope…
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…

840 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