Sniffleeu Sniffleeu - 2 months ago 10
C# Question

Find a html inside another element and then click it with Javascript

I'm trying to do a click on a html element with javascript. The

<span>
I want to click can be called id="tab-1275-closeEl", but the number in the name changes every time it's closed and created again. Under is part of the html surrounding the element:



<a id="tab-1275" class="x-tab x-unselectable x-tab-after-title x-box-item x-tab-default x-noicon x-tab-noicon x-tab-default-noicon x-top x-tab-top x-tab-default-top x-closable x-tab-closable x-tab-default-closable x-closable-top x-tab-closable-top x-tab-default-closable-top x-active x-tab-active x-tab-default-active x-top-active x-tab-top-active x-tab-default-top-active selected"
tabindex="0" unselectable="off" hidefocus="on" role="button" aria-label="Documents" style="right: auto; left: 1px; top: 0px; margin: 0px;" draggable="true" href="javascript:void(0)">
<span id="tab-1275-btnWrap" class="x-tab-wrap" unselectable="on">
<span id="tab-1275-btnEl" class="x-tab-button">
<span id="tab-1275-btnInnerEl" class="x-tab-inner x-tab-inner-center" unselectable="on" style="line-height: normal; padding-top: 2px;" data-qtip="Window-Id: DocAce">
Documents
</span>
<span id="tab-1275-btnIconEl" class="x-tab-icon-el " style="" unselectable="on" role="img"></span>
</span>
</span>
<span id="tab-1275-closeEl" class="x-tab-close-btn" tabindex="0" title="Close Activity" role="button" aria-label="Close Activity"></span>
</a>





At the moment I've only managed to close it if I give it an static ID in my code:

if (HttpContext.Current != null)
{
using (Page handler = HttpContext.Current.Handler as Page)
{
if (handler != null)
{
string script = string.Format((IFormatProvider)CultureInfo.InvariantCulture,
"<script type=\"text/javascript\">document.getElementById(\"tab-1275-closeEl\").click();</script>");
handler.ClientScript.RegisterStartupScript(handler.GetType(), "closeOnSave", script);
}

}
}


The element I want to click changes ID all the time and I don't have a way to predict what it will be next.

The data-qtip="Window-Id: DocAce"> however stays the same no matter how many times it's opened or closed and is unique, but it's inside a different element (always together though).

<span id="tab-1275-btnInnerEl" class="x-tab-inner x-tab-inner-center" unselectable="on" style="line-height: normal; padding-top: 2px;" data-qtip="Window-Id: DocAce">
Documents
</span>


In short, how can I search inside a element to see if it has one span with a value and then click on a different span that's inside the same element with javascript.

I can't change any of the html or the javascript that already exists on the page.

Please ask about anything that's unclear. I've been trying for a while so I might have missed something

Answer

Because your element with data-qtip="Window-Id: DocAce" never changes, you start right from this node:

var jEle = document.querySelectorAll('span[data-qtip="Window-Id: DocAce"]')[0]
           .parentNode.parentNode.nextSibling.nextSibling;

console.log(jEle.outerHTML);

jEle.click()
<a id="tab-1275"
   class="x-tab x-unselectable x-tab-after-title x-box-item x-tab-default x-noicon x-tab-noicon x-tab-default-noicon x-top x-tab-top x-tab-default-top x-closable x-tab-closable x-tab-default-closable x-closable-top x-tab-closable-top x-tab-default-closable-top x-active x-tab-active x-tab-default-active x-top-active x-tab-top-active x-tab-default-top-active selected"
   tabindex="0" unselectable="off" hidefocus="on" role="button" aria-label="Documents"
   style="right: auto; left: 1px; top: 0px; margin: 0px;" draggable="true" href="javascript:void(0)">
  <span id="tab-1275-btnWrap" class="x-tab-wrap" unselectable="on">
<span id="tab-1275-btnEl" class="x-tab-button">
<span id="tab-1275-btnInnerEl" class="x-tab-inner x-tab-inner-center" unselectable="on"
      style="line-height: normal; padding-top: 2px;" data-qtip="Window-Id: DocAce">
Documents
</span>
  <span id="tab-1275-btnIconEl" class="x-tab-icon-el " style="" unselectable="on" role="img"></span>
  </span>
  </span>
    <span id="tab-1275-closeEl" class="x-tab-close-btn" tabindex="0" title="Close Activity" role="button"
          aria-label="Close Activity"></span>
</a>

Comments