javascript variables into html

Discussion in 'JavaScript' started by psim, Nov 22, 2008.

0
  1. #1
    <script type="text/javascript" charset="utf-8">
    function increase()
    {
    i=i+1;
    }
    </script>

    <body>
    <h1>No delay sortable</h1>

    <ul id="sort1">
    <li id="s1_1" >one</li>
    <li id="s1_2">two</li>
    <li id="s1_3">three</li>
    <li id="s1_4">four</li>
    <li id="s1_5">five</li>

    </ul>

    <input name="insert" type="button" onClick=" $('sort1').insert({bottom: '<li recordid=\' XXXXXXX \'>six</li>'}); " />
    <script type="text/javascript" charset="utf-8">
    Sortable.create('sort1', {starteffect: myStartEffect});
    </script>

    </body>
    </html>

    hello,thnx for solving my previews problem....
    I want to put in XXXXXX a variable that will increase when i press the button like in my function "increase"..plz help
     
    psim, Nov 22, 2008 IP
  2. GreatMetro

    GreatMetro Peon

    Messages:
    117
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #2 
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>script.aculo.us functional test</title>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/effects.js"></script>
<script type="text/javascript" src="js/dragdrop.js"></script>
<script type="text/javascript">
//<![CDATA[
var i = 5;
var myStartEffect = function(element) {
element._opacity = Element.getOpacity(element);
new Effect.Opacity(element, {duration:0.2, from:element._opacity, to:0.7});
new Effect.Highlight(element, {});
}


function insertNew(container)
{
i++;
new_id = "s1_" + i;
alert('added new item with id: ' + new_id);
$(container).insert({bottom: '<li id="' + new_id + '">six</li>'});
Sortable.create(container, {starteffect: myStartEffect});
}
//]]>
</script>
<style type="text/css">
/*<![CDATA[*/
h1 {font-size: 1.2em; text-align:center;}
li {
margin: 5px auto;
padding: 50px;
width: 100px;
text-align:center;
list-style-type:none;
border: 2px solid #779;
background-color: #dde
}
/*]]>*/
</style>
</head>

<body>
<h1>No delay sortable</h1>

<ul id="sort1">
<li id="s1_1" >one</li>
<li id="s1_2">two</li>
<li id="s1_3">three</li>
<li id="s1_4">four</li>
<li id="s1_5">five</li>

</ul>

<input name="insert" type="button" onClick="insertNew('sort1');" />
<script type="text/javascript" charset="utf-8">
Sortable.create('sort1', {starteffect: myStartEffect});
</script>

</body>
</html>
    Code (markup):
     
    GreatMetro, Nov 22, 2008 IP