JavaScript - Removing Dashes In Numbers And Sending Them To Functions

hi,

at the moment my code: Code:

new Date();

this displays:

Thur Nov 24 201115:28:53 GMT+0000 (GMT)

I only want it to say:

Thur Nov 24 201115:28:53

I can't really get any help over on the greasemonkey forums so hopefully I can get some needed help here.

My goal with a script I am writing is to remove signatures from a forum I am a part of. Some of the people abuse it with half a page of stuff and it's out of control. So here is what the HTML source code for it looks like

Code:

<table cellSpacing="1" width="100%" border="0" class="tback" cellPadding="2">
<tr>
<td width="100" class="headcell">Author</td>

<td class="headcell">Topic</td>
</tr>
<tr vAlign="top" class="cell">
<td align="center">
<div><a href="profile.asp?$sid=&amp;id=5126">Roadwildcat</a></div>
<div class="fcaption">Pee Wee League</div><br><div><img src="images/stars-2.gif" alt="2 Stars"></div><br><img src="Avatars/Georgia.gif" alt="Member Avatar" height="62" width="62"><div class="fcaption">DC Georgia 2020 to Present</div>
<div class="fcaption">115 Posts</div>
</td>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td><span class="fcaption"><img src="images/oPost.gif" alt="Old Post" height="10" width="10" border="0" align="absmiddle">Posted - 03 January 2011 5:41</span></td>

<td align="right"><a href="myForum.asp?$sid=&amp;mode=compose&amp;to=5126"><img src="images/pm.gif" width="33" height="18" border="0" hspace="3" align="absmiddle" alt="Send Roadwildcat a Private Message"></a><a href="post.asp?$sid=&amp;mode=Quote&amp;id=24958&amp;fid=2&amp;t=24958&amp;fpage=1"><img hspace="3" alt="Reply With Quote" src="images/quote.gif" width="28" height="18" align="absmiddle" border="0"></a></td>
</tr>
</table>
<hr size="1" noshade>I have been trying to set my attendance to the all star games but when I do a game search on the map it is showing no games at all. Anyone else having this problem?<hr size="1"><span class="fcaption">SEC Champions 2022-2027 <br/> National Runner-up 2027 <br/> Recruiting BEAST! <br/> BULLDAWG BOUNCE</span></td>
</tr>

The very bottom where it has the 'span' tag and it says "SEC Champions" is where the Signatures are located. I want to completely remove that using my script and this is what I have right now

Code:

function sigRemove() {
	var sigs = document.getElementsByTagName('span');
	for (var i = 0; i < sigs.length; i++) {
		sigs[i].style.display = 'none';
	}
}

I know it's incomplete but I only want to remove that bottom span tag and everything inside of it and not every span tag on the page. Please help and I apologize for the long post

Is it possible to prevent the tooltip that appears when mousing over an image from appearing? This is without removing the alt or title tags.

I put this at the end of my code thinking that after the div displays (id = 'link_container') I can eliminate (id = 'link_container') from memory when the script ends so there's a place for another div (id = 'link_container') when/if there's onkeyup event.

Wouldn't this little script remove any element with an id = 'link_container' ?

<script type="text/javascript">
var deleteDiv = document.getElementById('link_container');
document.body.removeChild(deleteDiv);
</script>

Hi,

I'm trying to build this grease monkey script, which runs on all pages, and simply deletes all iframes that have no content loaded in them.

I have a hosts file with many ad servers which are blocked. This leaves ugly holes in the page and I am trying to remove these empty iframes.


Plz help

So I have two for loops that check to see if each array item * a number returns a decimal.

Here is my code(Cred to Philip M):
Code:

		var myArray = f;
		
		for (var wi=0; wi<myArray.length; wi++) {
			var warray = myArray[wi];
			var wabs = Math.abs((warray*z1))
			if (!(wabs > Math.floor(warray)) && (wabs < Math.ceil(warray))){
				break;
			}
			else{
				warray = 1;
				break;
			}
		}
		
		for (var yi=0; yi<myArray.length; yi++) {
			var yarray = myArray[yi];
			var yabs = Math.abs((yarray*z2))
			if (!(yabs > Math.floor(yarray)) && (yabs < Math.ceil(yarray))){
				break;
			}
			else{
				yarray = 1;
				break;
			}
		}

I have two options (I don't know which one is easier because I am clueless about loops)

Option 1:

Basically I want to find warray, and I want to find yarray, and then once I have found them, I want to check if they multiply to be x

If they don't, try again and eliminate the option.

In other words: I need to try every combination of numbers in the array until I find two numbers that aren't decimals when they are multiplied by "z1" or "z2" and they both multiply to be "n"

Option 2:

Find a number for warray that isn't a decimal. Set yarray = (a/warray). If that number * z2 isn't an integer, find warray again, but eliminate the option that didn't work.

Thank you so much!

Hi!

I'm trying to stick to learning javascript. It's slow going, really so! And I try to find practical examples to work on.

I first found this example => jQuery Add/Remove Input Fields - JSFiddle

Now I tried to adapt what is in that example to my code albeit a bit more complex than the div and p that's in the example.

I have this => Edit fiddle - JSFiddle

Where I get lost is this person is adding a whole new div and I need to create a new table row and increase all my name in the form by one (example name-1, name-2, name-3 and so on).

Obviously I'd need to create a button of the last table row to allow the user to add a row and if the row is created move the add button down and also include a remove button at the same time.

If some one could kindly push me along and feed me some ideas I'll go and research. I'm just not 100% on the implementation.

I thank you for your time and understanding!

I have a blog with a two-column setup... a sidebar and a main section for posting articles, but encapsulated in a div wrap. I am creating a mobile site and want to:

1) remove/hide the sidebar
2) move the main section to the center for easy reading

My issue is that I have tried CSS without success in accomplishing BOTH tasks. I easily can hide the sidebar using various methods, but the main section will not move to the center of the wrap, presumably because the sidebar is still there but not visible. So I went the JavaScript route instead with the following:

Code:

<script type="text/javascript">
		<!--
			if (screen.width <= 699) {
			var wrap = document.getElementById('wrap');			
			var sidebar = document.getElementById('sidebar');
			wrap.removeChild(sidebar);
			wrap.style.background = "inherit";			
			}
		-->
		</script>

Now my questions is... since the element is now removed, how do I move the main section to the center? I tried grabbing the main section with its id and floating it left (just to play around and see if it would move) and that didn't do anything.

Any help would be appreciated.

Hi,

So I've got an array called questions_raw

Code:

questions raw = [
["<Q1> Question",
    "choice1","choice2", "choice3"],
["<Q2> Question",
    "choice1","choice2", "choice3"],
...
]

And I want to list all of the questions, but not the choices/answers. So far, I've managed to list just the questions, but because another function randomly sorts them, I need to sort them back into numerical order for a separate function (displaying the questions)

I use characters (>,^) at the front to separate them into different answer types (just to explain the code)

I try this to cut each string down so that they can be sorted numerically/alphebetically -

Code:

function linearlist()
{
var list = [];
var tempStr = "";
for (var l = 0; l < 145; l++)
{
	tempStr = questions_raw[l][0];
    list[l] = tempStr;
}

if (list.charAt(0)== " " )  list = list.substring(3) ;
if (list.charAt(0)== ">" )  list = list.substring(3) ;
if (list.charAt(0)== "^" )  list = list.substring(3) ;
var sorted = list.sort();

document.Qtext2form.Qtext2.value = sorted.join("\n");
}

But it doesn't like it - because "it has no method charAt"

Any idea what i'm missing? Is it just that you have to put the [l] in every time you call a variable?

Cheers

I have the following script that I'm using to make an overlay panel. I didn't write it, but am trying to remove the "zoom out" from it. Here's an example:
http://www.intelsystech.com/ab/SampleOverlay.html
That tiny little black scribble is my text. I don't want it to zoom the div contents, but instead to simply set height and width of the div.

Or better, does anyone know a javascript for a panel attached to the left, which has a resizer to make it wider, and a collapse/expand button? That's all I was looking for.

Thanks!


Script follows:

Code:

function Position(x, y)
{
  this.X = x;
  this.Y = y;
  
  this.Add = function(val)
  {
    var newPos = new Position(this.X, this.Y);
    if(val != null)
    {
      if(!isNaN(val.X))
        newPos.X += val.X;
      if(!isNaN(val.Y))
        newPos.Y += val.Y
    }
    return newPos;
  }
  
  this.Subtract = function(val)
  {
    var newPos = new Position(this.X, this.Y);
    if(val != null)
    {
      if(!isNaN(val.X))
        newPos.X -= val.X;
      if(!isNaN(val.Y))
        newPos.Y -= val.Y
    }
    return newPos;
  }
  
  this.Min = function(val)
  {
    var newPos = new Position(this.X, this.Y)
    if(val == null)
      return newPos;
    
    if(!isNaN(val.X) && this.X > val.X)
      newPos.X = val.X;
    if(!isNaN(val.Y) && this.Y > val.Y)
      newPos.Y = val.Y;
    
    return newPos;  
  }
  
  this.Max = function(val)
  {
    var newPos = new Position(this.X, this.Y)
    if(val == null)
      return newPos;
    
    if(!isNaN(val.X) && this.X < val.X)
      newPos.X = val.X;
    if(!isNaN(val.Y) && this.Y < val.Y)
      newPos.Y = val.Y;
    
    return newPos;  
  }  
  
  this.Bound = function(lower, upper)
  {
    var newPos = this.Max(lower);
    return newPos.Min(upper);
  }
  
  this.Check = function()
  {
    var newPos = new Position(this.X, this.Y);
    if(isNaN(newPos.X))
      newPos.X = 0;
    if(isNaN(newPos.Y))
      newPos.Y = 0;
    return newPos;
  }
  
  this.Apply = function(element)
  {
    if(typeof(element) == "string")
      element = document.getElementById(element);
    if(element == null)
      return;
    if(!isNaN(this.X))
      element.style.left = this.X + 'px';
    if(!isNaN(this.Y))
      element.style.top = this.Y + 'px';  
  }
}

function hookEvent(element, eventName, callback)
{
  if(typeof(element) == "string")
    element = document.getElementById(element);
  if(element == null)
    return;
  if(element.addEventListener)
  {
    element.addEventListener(eventName, callback, false);
  }
  else if(element.attachEvent)
    element.attachEvent("on" + eventName, callback);
}

function unhookEvent(element, eventName, callback)
{
  if(typeof(element) == "string")
    element = document.getElementById(element);
  if(element == null)
    return;
  if(element.removeEventListener)
    element.removeEventListener(eventName, callback, false);
  else if(element.detachEvent)
    element.detachEvent("on" + eventName, callback);
}

function cancelEvent(e)
{
  e = e ? e : window.event;
  if(e.stopPropagation)
    e.stopPropagation();
  if(e.preventDefault)
    e.preventDefault();
  e.cancelBubble = true;
  e.cancel = true;
  e.returnValue = false;
  return false;
}

function getMousePos(eventObj)
{
  eventObj = eventObj ? eventObj : window.event;
  var pos;
  if(isNaN(eventObj.layerX))
    pos = new Position(eventObj.offsetX, eventObj.offsetY);
  else
    pos = new Position(eventObj.layerX, eventObj.layerY);
  return correctOffset(pos, pointerOffset, true);
}

function getEventTarget(e)
{
  e = e ? e : window.event;
  return e.target ? e.target : e.srcElement;
}

function absoluteCursorPostion(eventObj)
{
  eventObj = eventObj ? eventObj : window.event;
  
  if(isNaN(window.scrollX))
    return new Position(eventObj.clientX + document.documentElement.scrollLeft + document.body.scrollLeft, 
      eventObj.clientY + document.documentElement.scrollTop + document.body.scrollTop);
  else
    return new Position(eventObj.clientX + window.scrollX, eventObj.clientY + window.scrollY);
}

function dragObject(element, attachElement, lowerBound, upperBound, startCallback, moveCallback, endCallback, attachLater)
{
  if(typeof(element) == "string")
    element = document.getElementById(element);
  if(element == null)
      return;

  var cursorStartPos = null;
  var elementStartPos = null;
  var dragging = false;
  var listening = false;
  var disposed = false;

  function dragStart(eventObj)
  {
    if(dragging || !listening || disposed) return;
    dragging = true;

    if(startCallback != null)
      startCallback(eventObj, element);

    cursorStartPos = absoluteCursorPostion(eventObj);

    elementStartPos = new Position(parseInt(element.style.left), parseInt(element.style.top));

    elementStartPos = elementStartPos.Check();

    hookEvent(document, "mousemove", dragGo);
    hookEvent(document, "mouseup", dragStopHook);

    return cancelEvent(eventObj);
  }

  function dragGo(eventObj)
  {
    if(!dragging || disposed) return;

    var newPos = absoluteCursorPostion(eventObj);
    newPos = newPos.Add(elementStartPos).Subtract(cursorStartPos);
    newPos = newPos.Bound(lowerBound, upperBound)
    newPos.Apply(element);
    if(moveCallback != null)
      moveCallback(newPos, element);

    return cancelEvent(eventObj);
  }

  function dragStopHook(eventObj)
  {
    dragStop();
    return cancelEvent(eventObj);
  }

  function dragStop()
  {
    if(!dragging || disposed) return;
    unhookEvent(document, "mousemove", dragGo);
    unhookEvent(document, "mouseup", dragStopHook);
    cursorStartPos = null;
    elementStartPos = null;
    if(endCallback != null)
      endCallback(element);
    dragging = false;
  }

  this.Dispose = function()
  {
    if(disposed) return;
    this.StopListening(true);
    element = null;
    attachElement = null
    lowerBound = null;
    upperBound = null;
    startCallback = null;
    moveCallback = null
    endCallback = null;
    disposed = true;
  }
  
  this.GetLowerBound = function()
  { return lowerBound; }
  
  this.GetUpperBound = function()
  { return upperBound; }

  this.StartListening = function()
  {
    if(listening || disposed) return;
    listening = true;
    hookEvent(attachElement, "mousedown", dragStart);
  }

  this.StopListening = function(stopCurrentDragging)
  {
    if(!listening || disposed) return;
    unhookEvent(attachElement, "mousedown", dragStart);
    listening = false;

    if(stopCurrentDragging && dragging)
      dragStop();
  }

  this.IsDragging = function(){ return dragging; }
  this.IsListening = function() { return listening; }
  this.IsDisposed = function() { return disposed; }

  if(typeof(attachElement) == "string")
    attachElement = document.getElementById(attachElement);
  if(attachElement == null)
    attachElement = element;

  if(!attachLater)
    this.StartListening();
}

function ResizeableContainer(contentID, parent)
{
  var MINSIZE = 38;
  var EDGE_THICKNESS = 7;
  var EDGEDIFFSIZE = 2*EDGE_THICKNESS + 3;
  var EDGEDIFFPOS = EDGE_THICKNESS + 1;
  var TEXTDIFF = EDGE_THICKNESS + 2;
  
  var _width = 38;
  var _height = 38;
  
  var _maxWidth = 900;
  var _maxHeight = 600;
  
  var _minWidth = MINSIZE;
  var _minHeight = MINSIZE;

  var _container = document.createElement('DIV');
  _container.className = 'reContainer';
  
  var _content = document.getElementById(contentID);
  _content.ResizeableContainer = this;
  _content.className = 'reContent';
  
  var _rightEdge = document.createElement('DIV');
  _rightEdge.className = 'reRightEdge';
  
  var _bottomEdge = document.createElement('DIV');
  _bottomEdge.className = 'reBottomEdge';
 
  var _cornerHandle = document.createElement('DIV');
  _cornerHandle.className = 'reCorner';
  
  var _leftCornerHandle = document.createElement('DIV');
  _leftCornerHandle.className = 'reLeftCorner';
  
  var _topCornerHandle = document.createElement('DIV');
  _topCornerHandle.className = 'reTopCorner';
  
  var _rightHandle = document.createElement('DIV');
  _rightHandle.className = 'reRightHandle';

  var _bottomHandle = document.createElement('DIV');
  _bottomHandle.className = 'reBottomHandle';
  
  var _topRightImageHandle = document.createElement('DIV');
  _topRightImageHandle.className = 'reTopRightImage';
  
  var _bottomLeftImageHandle = document.createElement('DIV');
  _bottomLeftImageHandle.className = 'reBottomLeftImage';
  
  var _leftEdge = document.createElement('DIV');
  _leftEdge.className = 'reLeftEdge';
  
  var _topEdge = document.createElement('DIV');
  _topEdge.className = 'reTopEdge';
  
  _cornerHandle.appendChild(_leftCornerHandle);
  _cornerHandle.appendChild(_topCornerHandle);
  
  _rightEdge.appendChild(_topRightImageHandle);
  _rightEdge.appendChild(_rightHandle);
  
  _bottomEdge.appendChild(_bottomHandle);
  _bottomEdge.appendChild(_bottomLeftImageHandle);

  _container.appendChild(_topEdge);
  _container.appendChild(_leftEdge);    
  _container.appendChild(_rightEdge);
  _container.appendChild(_bottomEdge);
  _container.appendChild(_cornerHandle);
  _container.appendChild(_content);
    
  var _rightHandleDrag = new dragObject(_rightEdge, null, new Position(0, 3), new Position(0, 3), moveStart, rightHandleMove, moveEnd, true);
  var _bottomHandleDrag = new dragObject(_bottomEdge, null, new Position(3, 0), new Position(3, 0), moveStart, bottomHandleMove, moveEnd, true);
  var _cornerHandleDrag = new dragObject(_cornerHandle, null, new Position(0, 0), new Position(0, 0), moveStart, cornerHandleMove, moveEnd, true);
  
  UpdateBounds();
  UpdatePositions();
  AddToDocument();
  
  function moveStart(eventObj, element)
  {
    if(element == _cornerHandle)
      document.body.style.cursor = 'se-resize';
    else if(element == _bottomEdge)
      document.body.style.cursor = 's-resize';
    else if(element == _rightEdge)
      document.body.style.cursor = 'e-resize';
  }
  
  function moveEnd(element)
  {
    UpdatePositions();
    document.body.style.cursor = 'auto'; 
  }

  function rightHandleMove(newPos, element)
  {   
    _width = newPos.X + EDGE_THICKNESS;
    UpdatePositions();
  }
  
  function bottomHandleMove(newPos, element)
  {
    _height = newPos.Y + EDGE_THICKNESS;
    UpdatePositions();
  }

  function cornerHandleMove(newPos, element)
  {
    _width = newPos.X + EDGE_THICKNESS;
    _height = newPos.Y + EDGE_THICKNESS;
    UpdatePositions();
  }

  function UpdateBounds()
  {
    _rightHandleDrag.GetLowerBound().X = _minWidth - EDGE_THICKNESS;
    _rightHandleDrag.GetUpperBound().X = _maxWidth - EDGE_THICKNESS;
    _bottomHandleDrag.GetLowerBound().Y = _minHeight - EDGE_THICKNESS;
    _bottomHandleDrag.GetUpperBound().Y = _maxHeight - EDGE_THICKNESS;
    _cornerHandleDrag.GetLowerBound().X = _minWidth - EDGE_THICKNESS;
    _cornerHandleDrag.GetUpperBound().X = _maxWidth - EDGE_THICKNESS;
    _cornerHandleDrag.GetLowerBound().Y = _minHeight - EDGE_THICKNESS;
    _cornerHandleDrag.GetUpperBound().Y = _maxHeight - EDGE_THICKNESS;
  }
  
  function UpdatePositions()
  {
    if(_width < _minWidth)
      _width = _minWidth;
    if(_width > _maxWidth)
      _width = _maxWidth;
    
    if(_height < _minHeight)
      _height = _minHeight;
    if(_height > _maxHeight)
      _height = _maxHeight;
    
    _container.style.width = _width + 'px';  
    _container.style.height = _height + 'px';
    
    _content.style.width = (_width - TEXTDIFF) + 'px';
    _content.style.height = (_height - TEXTDIFF) + 'px';
    _rightEdge.style.left = (_width - EDGEDIFFPOS) + 'px';
    _rightEdge.style.height = (_height - EDGEDIFFSIZE) + 'px';
    _bottomEdge.style.top = (_height - EDGEDIFFPOS) + 'px';
    _bottomEdge.style.width = (_width - EDGEDIFFSIZE) + 'px';
    _cornerHandle.style.left = _rightEdge.style.left;
    _cornerHandle.style.top = _bottomEdge.style.top;
    _topEdge.style.width = (_width - EDGE_THICKNESS) + 'px';
    _leftEdge.style.height = (_height - EDGE_THICKNESS) + 'px';
    
    
    _rightHandle.style.top = ((_height - MINSIZE) / 2) + 'px';
    _bottomHandle.style.left = ((_width - MINSIZE) / 2) + 'px';
  }
  
  function Listen(yes)
  {
    if(yes)
    {
      _rightHandleDrag.StartListening();
      _bottomHandleDrag.StartListening();
      _cornerHandleDrag.StartListening();
    }
    else
    {
      _rightHandleDrag.StopListening();
      _bottomHandleDrag.StopListening();
      _cornerHandleDrag.StopListening();
    }
  }
  
  function AddToDocument()
  {
    if(typeof(parent) == "string")
      parent = document.getElementById(parent);
    
    if(parent == null || parent.appendChild == null)
    {
      var id = "sotc_re_" + new Date().getTime() + Math.round(Math.random()*2147483647);
      while(document.getElementById(id) != null)
        id += Math.round(Math.random()*2147483647);
        
      document.write('<span id="'+ id + '"></span>');
      element = document.getElementById(id);
      element.parentNode.replaceChild(_container, element);
    }
    else
    {
      parent.appendChild(_container);
    }
    
    Listen(true); 
  }
  
  this.StartListening = function()
  { Listen(true); }
  
  this.StopListening = function()
  { Listen(false); }
  
  this.GetContainer = function()
  { return _container; }
  
  this.GetContentElement = function()
  { return _content; }
  
  this.GetMinWidth = function()
  { return _minWidth; }
  
  this.GetMaxWidth = function()
  { return _maxWidth; }
  
  this.GetCurrentWidth = function()
  { return _width; }
  
  this.GetMinHeight = function()
  { return _minHeight; }
  
  this.GetMaxHeight = function()
  { return _maxHeight; }
  
  this.GetCurrentHeight = function()
  { return _height; }
  
  this.SetMinWidth = function(value)
  {
    value = parseInt(value);
    if(isNaN(value) || value < MINSIZE)
      value = MINSIZE;
    
    _minWidth = value;
    
    UpdatePositions();
    UpdateBounds();
  }
  
  this.SetMaxWidth = function(value)
  {
    value = parseInt(value);
    if(isNaN(value) || value < MINSIZE)
      value = MINSIZE;
    
    _maxWidth = value;
    
    UpdatePositions();
    UpdateBounds();
  }
  
  this.SetCurrentWidth = function(value)
  {
    value = parseInt(value);
    if(isNaN(value))
      value = 0;
    
    _width = value;
    
    UpdatePositions();
  }
  
  this.SetMinHeight = function(value)
  {
    value = parseInt(value);
    if(isNaN(value) || value < MINSIZE)
      value = MINSIZE;
    
    _minHeight = value;
    
    UpdatePositions();
    UpdateBounds();
  }
  
  this.SetMaxHeight = function(value)
  {
    value = parseInt(value);
    if(isNaN(value) || value < MINSIZE)
      value = MINSIZE;
    
    _maxHeight = value;
    
    UpdatePositions();
    UpdateBounds();
  }
  
  this.SetCurrentHeight = function(value)
  {
    value = parseInt(value);
    if(isNaN(value))
      value = 0;
    
    _height = value;
    
    UpdatePositions();
  }
}

Hey guys...

Basically I need a function that will remove numerous elements from a page based on their class. I then also need a function to bring those elements back afterwards. If anyone is wondering, I'm trying to add buttons to remove/add images.

Thanks!

Hay!

I have a silly question, I have a row of numbers, 1 to 250. The numbers are all in one horizantal line. But I want to use a <br> after every 10 numbers.

I tried:

if(i % 10) {
document.write("<br>");
}

This is how I wanted to be:

1, 2, 3, 4, 5, 6, 7, 8, 10,
11, 12, 13, 14, 15, 16, 17, 18, 20,

Does any one know how can I achieve this I'm still a noob.

I have written below code to except only number in a textbox. This is working fine. However, When I'm copying and pasting, then it is taking non-numbers.

Code:

<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

        <SCRIPT type="text/javascript">
     
            function isNumberKey1(evt)
            {
                var charCode = (evt.which) ? evt.which : event.keyCode
                if (charCode = 46 && charCode > 31 
                    && (charCode < 48 || charCode > 57))
                    return false;

                return true;
            }
     
    
     
        </SCRIPT>
    </head>
    <body>
        Phone number :
        <input type="text" id="phonenumber" onkeypress="return isNumberKey1(event)"  maxlength="10" size="15" > <br /> <br />
        Alternative number: 
        <input type="text" onkeypress="return isNumberKey1(event)" id="alt" maxlength="10" size="15">
         <input type="button"  value="Submit">

    </body>
</html>

I'm trying to teach myself Javascript to prepare for it next term. I asked earlier how to add together the numbers 1-10 in a loop. Now I'm wondering how can I change the 10 to be a valuable I input. Basically I want to be able to enter a number on the page or in a message box then I want the code to add all the numbers from 1- the number I enter.

The code I got from my previous thread is he
Code:

<html>
<head>
<script type="text/javascript">

var varX = user input;
function sum() {
   var varX = user input;
   for(varY = 1; varY<=10; varY++) {
      varX = varX + varY;
   }
   return varX;
}

var resultat = sum();
alert(resultat);         // show message box with result
</script>
</head>
<body>
</body>
</html>