/    Sign up×
Community /Pin to ProfileBookmark

Can’t get title change on for loop [i]=0

Hey Guy’s,
this is a wierd one. The for loop works on all the pseudo links except the first one?? I hope it’s a matter of [i-1] but can’t figure out how I’d write it.
This is the relevant js.

[CODE]
//appended to row
var additemlink=document.createElement(‘span’);
additemlink.setAttribute(‘title’,’Review this ‘+item+’, then click Continue Shopping to return.’);
additemlink.className=’itemlink’;
additemlink.onclick=function()
{
this.style.color=’red’;
this.setAttribute(‘title’,this.innerText+’, item just reviewed.’);
var eimg=document.getElementById(‘eimg’);
eimg.firstChild.src=ref;
eimg.style.display=’block’;
EvalSound1();
f2.className=’register’;
tablecontainer2.style.display=’block’;
invoice2.style.display=’block’;
this.parentNode.parentNode.scrollIntoView(false);
var itemlinks=document.getElementsByClassName(‘itemlink’);
for(var i=0;i<itemlinks.length;i++)
{
if(itemlinks[i] !== this )
{
itemlinks[i].setAttribute(‘title’,’Review this ‘+itemlinks[i].innerText+’, then click Continue Shopping to return.’);
itemlinks[i].style.color=’#2c3664′;
this.style.color=’red’;
this.setAttribute(‘title’,this.innerText+’, just reviewed.’);
}
}
};
additemlink.onmouseover=function()
{
var itemlinks=document.getElementsByClassName(‘itemlink’);
for(var i=0;i<itemlinks.length;i++)
{
if((this.style.color==’red’)&&(eimg.style.display==’block’))
{
this.setAttribute(‘title’,’Showing: ‘+this.innerText);
//I think itemlinks[i-1].setAttribute(‘title’,?????????
itemlinks[i].setAttribute(‘title’,’Review this item: ‘+itemlinks[i].innerText+’, then click Continue Shopping or Sub Total above to return.’);
}
if((this.style.color==’red’)&&(eimg.style.display==’none’))
{
this.setAttribute(‘title’,this.innerText+’, item just reviewed.’);
itemlinks[i].setAttribute(‘title’,’Review this item: ‘+itemlinks[i].innerText+’, then click Continue Shopping or Sub Total above to return.’);
}
}
};
[/CODE]

Any help greatly appreciated. It works on all but the first one?

to post a comment
JavaScript

16 Comments(s)

Copy linkTweet thisAlerts:
@JMRKERApr 03.2012 — I believe it is this statement...
<i>
</i>{
if(itemlinks[i] !== this )
{

It bypasses the title logic when i=0.

It would happen elsewhere when the i value does not equal the value of 'this'.

Add an 'else' { alert('Value of i: '+i+'n'+this); } portion to this 'if' to see if what I predict will happen.
Copy linkTweet thisAlerts:
@THEFOOLauthorApr 03.2012 — Right on [COLOR=magenta][B][U]JMRKER [/U][/B][/COLOR][COLOR=black]will do[/COLOR]
Copy linkTweet thisAlerts:
@THEFOOLauthorApr 03.2012 — [COLOR=magenta][B][U]JMRKER [/U][/B][/COLOR] You're right, the first onclick didn't alert anything, the second onclick alerted 'Value of i: 1 [htmlspanelement]'. The problem is, how do you get itemlink[0] to change it's title after it has been clicked?
Copy linkTweet thisAlerts:
@THEFOOLauthorApr 03.2012 — [COLOR=magenta][B][U]JMRKER[/U][/B][/COLOR][COLOR=black] SET THE ALERT TO THIS BUT IT DOESN'T ALERT ON THE FIRST 'ITEMLINK' CLICKED IT ONLY ALERTS ON THE NEXT PSEUDO LINKS[/COLOR]
[CODE]
alert('Value of i: '+(i-1)+'n'+this);
[/CODE]


SHOULD IT BE VAR I<0;? WILL CHECK IT OUT
Copy linkTweet thisAlerts:
@JMRKERApr 03.2012 — [COLOR=magenta][B][U]JMRKER[/U][/B][/COLOR][COLOR=black] SET THE ALERT TO THIS BUT IT DOESN'T ALERT ON THE FIRST 'ITEMLINK' CLICKED IT ONLY ALERTS ON THE NEXT PSEUDO LINKS[/COLOR]
[CODE]
alert('Value of i: '+(i-1)+'n'+this);
[/CODE]


SHOULD IT BE VAR I<0;? WILL CHECK IT OUT[/QUOTE]


You don't show the HTML that goes along with your snippet,

so I'm not sure what the reference 'this' is testing.

If 'this' has a 'name' or 'id' value, then try...
<i>
</i>alert('Value of i: '+i+'n'+this.name);
// alert('Value of i: '+i+'n'+this.id);


Can you be a bit more specific about what it is that you are trying to do?
Copy linkTweet thisAlerts:
@THEFOOLauthorApr 03.2012 — [B][U][COLOR=magenta]JMRKER[/COLOR][/U][/B] unortunatley the html is an insertrow with append span span to cell and onclick added with the appended element and I realize this may be the wrong way to go because I'm setting the title with the onclick and that is why the function should be called from outside of the insertrow function? Unless I could use
[CODE]
if(itemlinks[i-1]==this)
[/CODE]
Copy linkTweet thisAlerts:
@JMRKERApr 03.2012 — [B][U][COLOR=magenta]JMRKER[/COLOR][/U][/B] unortunatley the html is an insertrow with append span span to cell and onclick added with the appended element and I realize this may be the wrong way to go because I'm setting the title with the onclick and that is why the function should be called from outside of the insertrow function? Unless I could use
[CODE]
if(itemlinks[i-1]==this)
[/CODE]
[/QUOTE]


The problem with this logic is that if 'i' is zero, then the element of the array is out-of-bounds right off the bat.

If you want this logic, then you would need to start the 'for' loop at i=1 instead.

But then, without additional logic change, you would probably not set the last element of the array.

As in:

(for i=1; i<max_arr_position; i++) { ...

would need to change to:

(for i=1; i<max_arr_position+1; i++) { ...

:eek:

Might be time to just re-think the task to better define what the end result is to attain. ?
Copy linkTweet thisAlerts:
@THEFOOLauthorApr 04.2012 — Wow [COLOR=magenta][B]JMRKER [/B][/COLOR][COLOR=black], that was a wild lesson in CSS as well as javascript. I had set the style by external CSS for .itemlink:hover to change the color of the link from basicaly blue to green therefore the first itemlink hovered over would never recieve the if style is blue statement to change the title in the first place. I commented out the :hover in the style sheet so the color remained equal to the if at all times. Not only that but I only needed to set the title attributes in the onmouseover not in the append span or the onclick function. I still don't know how to add the hover effect after setting the style color with onclick the CSS :hover command no longer has any affect at all? Is hover an attribute? I guess I'd have to change the classnames of the itemlinks[i] or just recall itemlinks[i].className= to get the blue links to turn green on hover again but the script as written bellow accomplishes everything except the hover affect very well.:eek:[/COLOR]



[CODE]
var additem=itemrow.insertCell(1);
additem.className='item';
additem.colSpan='3';
var additemlink=document.createElement('span');
additemlink.className='itemlink';
//additemlink.setAttribute('title','Review this item, then click Continue
Shopping or Sub Total above to return.');
//not needed as it also overides the first spans title
//mouseover first, get the title change first
additemlink.onmouseover=function()
{
var itemlinks=document.getElementsByClassName('itemlink');
for(var i=0;i<itemlinks.length;i++)
{
if((itemlinks[i].style.color=='red'/*change to green to catch css :hover?*/)&&(eimg.style.display=='none'))
{
itemlinks[i].setAttribute('title',this.innerText+', item just reviewed.');
//maybe itemlinks[i].className='itemlink2' to get new :hover?
}
//use direct comparison else if
else if((itemlinks[i].style.color=='red')&&(eimg.style.display=='block'))
{
itemlinks[i].setAttribute('title','Showing: '+this.innerText);
//maybe itemlinks[i].className='itemlink2' to get new :hover?
}
//set the blue span speudo links automatically
else
{
itemlinks[i].setAttribute('title','Review this '+itemlinks[i].innerText+', then click Continue Shopping or Sub Total above to return.');
//maybe itemlinks[i].className='itemlink' to restore :hover?
}
}
};

//add onclick after so that color changes made by onclick don't affect mouseover
additemlink.onclick=function()
{
this.style.color='red';
var eimg=document.getElementById('eimg');
eimg.firstChild.src=ref;
eimg.style.display='block';
EvalSound1();
f2.className='register';
tablecontainer2.style.display='block';
invoice2.style.display='block';
this.parentNode.parentNode.scrollIntoView(false);
var itemlinks=document.getElementsByClassName('itemlink');
for(var i=0;i<itemlinks.length;i++)
{
if(itemlinks[i]==this )
{
this.style.color='red';
//over-rides css :hover?
}
if(itemlinks[i]!==this )
{
itemlinks[i].style.color='#2c3664';
//over-rides css :hover?
//maybe itemlinks[i].className='itemlink'? to reset :hover
}
}
};
[/CODE]


will have to check it out latter. I'm brained out. Any insight greatly appreciated. Ispell this latter?
Copy linkTweet thisAlerts:
@JMRKERApr 04.2012 — :hover is a pseudo-attribute. I don't believe it can be changed with an onclick event.

You don't need to post your entire program, but it would be easier for me to analyze

if you included a brief portion of the HTML that is being effected by your JS

so we can see the effect that you are trying to achieve.
Copy linkTweet thisAlerts:
@THEFOOLauthorApr 04.2012 — [COLOR=magenta][B]JMRKER[/B][/COLOR][COLOR=black] , It is prity dificult to load html that is created with insertrow styled html and I'm not sure it will explain beyond my previous endeavours.[/COLOR]
[LIST=1]
  • [*]#f1 div recieves ajax responseText. Multiple fieldsets in div rows showing each item row from dbase

  • [*]#f2 recieves insertrow to tbody[0].rows[0] when buttons are clicked in #f1 fieldsets in responseText

  • [*]#f2 className .register shows tbody[0].rows[0] only scroll y only

  • [*]#tablecontainer2 with cloned table for fixed header covers top half of #f2 .register, position fixed z-index 2.

  • [*]#tablecontainer2 onclick changes #f2 className to .viewtable

  • [*]#f2 .viewtable covers #f1 to show full table scroll y only

  • [*].itemlink span is in insertrow.cells[1]

  • [*]#eimg div covers #f1 when .itemlink is clicked to show enhanced item image scroll x only

  • [/LIST]
    That is about a simple as I can put it and I'm not sure it explains the required 'if' statements. I'm testing out className changes now to see if I can maintain the on hover affect. Let me know if you understood any of this.:eek:
    Copy linkTweet thisAlerts:
    @JMRKERApr 04.2012 — Too confusing for me with so little code provided.

    I'm afraid I really don't understand your problem

    and probably cannot be of much further help.

    Good Luck! ?
    Copy linkTweet thisAlerts:
    @THEFOOLauthorApr 08.2012 — [COLOR=magenta][B]JMRKER[/B][COLOR=black] Yes, I'll have to take some screen shots to show you what I'm getting at. I've got a script that works but it takes out the css :hover. Can't do it till next teusday. Happy Easter.[/COLOR][/COLOR]
    Copy linkTweet thisAlerts:
    @THEFOOLauthorApr 12.2012 — [COLOR=magenta][B]JMRKER[/B][/COLOR][COLOR=black] hey, I got video mpeg4 of screen shots that might help demonstrate the cause and affect of this post. I hope it can be uploaded here. That way any of the javascript guru's might be able to help. I guess the post title should have been made more clear, something like ' [B][U]CSS Hover affect gone after mouseover javascript[/U][/B] '. Woops, WebDeveloper.com won't allow mpeg files of any kind to upload. What a shame. I guess it could lead to an official WebDeveloper.com Porno site?[/COLOR]
    Copy linkTweet thisAlerts:
    @THEFOOLauthorApr 13.2012 — [B][COLOR="Magenta"]JMRKER [/COLOR][/B], I solved it like so

    [B][U]External CSS[/U][/B]
    [code=html]
    .itemlink
    {
    display:block;
    color:#2c3664;
    white-space:nowrap;
    text-decoration:none;
    }
    .itemlink:hover
    {
    color:#e8b23d;
    text-decoration:none;
    }
    #itemlink2
    {
    display:block;
    color:red !important;
    white-space:nowrap;
    text-decoration:none;
    }
    #itemlink2:hover
    {
    color:#e8b23d !important;
    text-decoration:none;
    }
    [/code]


    [B][U].JS FILE[/U][/B]
    [CODE]
    var additem=itemrow.insertCell(1);
    additem.className='item';
    additem.colSpan='3';
    var additemlink=document.createElement('span');
    additemlink.className='itemlink';
    additemlink.onmouseover=function()
    {
    var itemlinks=document.getElementsByClassName('itemlink');
    for(var i=0;i<itemlinks.length;i++)
    {
    if((itemlinks[i].id==='itemlink2')&&(eimg.style.display=='none'))
    {
    itemlinks[i].setAttribute('title',this.innerText+', item just reviewed.');
    }
    else if((itemlinks[i].id==='itemlink2')&&(eimg.style.display=='block'))
    {
    itemlinks[i].setAttribute('title','Showing: '+this.innerText);
    }
    else
    {
    itemlinks[i].setAttribute('title','Review purchase of: '+itemlinks[i].innerText+', then click Continue Shopping or Sub Total above to return.');
    }
    }
    };
    additemlink.onclick=function()
    {
    var eimg=document.getElementById('eimg');
    eimg.firstChild.src=ref;
    eimg.style.display='block';
    EvalSound1();
    f2.className='register';
    tablecontainer2.style.display='block';
    invoice2.style.display='block';
    this.parentNode.parentNode.scrollIntoView(false);
    var itemlinks=document.getElementsByClassName('itemlink');
    for(var i=0;i<itemlinks.length;i++)
    {
    if(itemlinks[i]==this )
    {
    this.id='itemlink2';
    }
    if(itemlinks[i]!==this )
    {
    itemlinks[i].className='itemlink';
    itemlinks[i].id='';//Necessary!!!!!!!!!!!!!!
    }
    }
    };
    additemlink.appendChild(document.createTextNode(item));
    additem.appendChild(additemlink);
    [/CODE]

    :eek:??
    Copy linkTweet thisAlerts:
    @JMRKERApr 13.2012 — Congratulations ... that's good to hear. ?

    Do you have a link to the final product so we can see how all the pieces fit?
    Copy linkTweet thisAlerts:
    @THEFOOLauthorApr 14.2012 — [COLOR=magenta][B]JMRKER [/B][/COLOR][COLOR=black], sorry no. I'm rounding up the Database before I load the site to a test file on Godaddy. As I'm ussing Uniserver on thumb drive for testing it will be a while beore I can provide a link.[/COLOR]
    ×

    Success!

    Help @THEFOOL spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 BETA 5.27,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @AriseFacilitySolutions09,
    tipped: article
    amount: 1000 SATS,

    tipper: @Yussuf4331,
    tipped: article
    amount: 1000 SATS,

    tipper: @darkwebsites540,
    tipped: article
    amount: 10 SATS,
    )...