CODEWITHSUNDEEP
javascript
Hai Truong IT
Hai Truong IT

Reputation: 4187

Error when get value from event onclick in javascript?

i have a sample code:

<span id="app_name_1"></span><a onclick="addSelectApplication('name 1');" href="#">Add name 1</a>                   
<span id="app_name_2"></span><a onclick="addSelectApplication('name 2');" href="#">Add name 2</a>               
<span id="app_name_3"></span><a onclick="addSelectApplication('name 3');" href="#">Add name 3</a>

And javascript

<script>
function addSelectApplication(title) {
    for(var i=0; i<3; i++) {
        parent.document.getElementById('app_name_'+i).innerHTML = title;
    }    
}
</script>

When I click Add name 1, result is

<span id="app_name_1">name 1</span> 
<span id="app_name_2">name 1</span>
<span id="app_name_3">name 1</span>

How to fix with result is:

When click Add name 1

<span id="app_name_1">name 1</span> 
<span id="app_name_2"></span>
<span id="app_name_3"></span>

When click Add name 2

<span id="app_name_1"></span>   
<span id="app_name_2">name 2</span>
<span id="app_name_3"></span>

Upvotes: 0

Views: 99

Answers (4)

Kotzilla
Kotzilla

Reputation: 1413

<span id="app_name_1"></span>   
<span id="app_name_2"></span>
<span id="app_name_3"></span>

<a title="name 1" onclick="addSelectApplication(this);" href="#">Add name 1</a>              
<a title="name 2" onclick="addSelectApplication(this);" href="#">Add name 2</a>             
<a title="name 3" onclick="addSelectApplication(this);" href="#">Add name 3</a>
<script>
    function addSelectApplication(obj) {     
    for(var i=1; i<=3; i++) {        
        var no = obj.title.split(' ');
        if (no[1] == i) {
            document.getElementById('app_name_'+i).innerHTML = obj.title;     
        } else {
            document.getElementById('app_name_'+i).innerHTML = '';     
        }
    }   
    return false;    
}
</script>

Upvotes: 0

Akhil Sekharan
Akhil Sekharan

Reputation: 12683

For your current html format, the simplest way is:

    <span id="app_name_1"></span><a onclick="this.previousSibling.innerHTML = 'name 1';" href="#">Add name 1</a>               
    <br />
    <span id="app_name_2"></span><a onclick="this.previousSibling.innerHTML = 'name 2';"  href="#">Add name 2</a>               
    <br />
    <span id="app_name_3"></span><a onclick="this.previousSibling.innerHTML = 'name 3';"  href="#">Add name 3</a>

Upvotes: 0

MVCKarl
MVCKarl

Reputation: 1295

Try this

 function addSelectApplication(title)
    {
        var splitStr = title.split(' ');

        for (var i = 1; i < 4; i++)
        {
            if (splitStr[1] == i.toString())
            {
                parent.document.getElementById('app_name_' + i).innerHTML = title;
            }
            else
            {
                parent.document.getElementById('app_name_' + i).innerHTML = "";
            }
        }
    }

Upvotes: 0

Madbreaks
Madbreaks

Reputation: 19539

You're looping over all of the spans and setting the title. You need to somehow determine which one you clicked, here from the title itself:

function addSelectApplication(title) {
    // Extract the link clicked from the title text
    var i = title.replace(/.*(\d)/, "$1");

    // Set the content
    parent.document.getElementById('app_name_'+i).innerHTML = title;
}

Cheers

Upvotes: 2

Related Questions