locked
how to know the index of clicked img RRS feed

  • Question

  • User-1952516322 posted

    Hello,

    I want to know how to get the index or content of element by tag name when I click on near img.

    Example:

            <div>
                <img src="~/Images/Image1.jgp" name="imgItem"/>
                <span name="ItemName">Laptop</span>
                <img src="~/Images/AddItem.jpg" name="AddItem" onclick="addItem()" />
            </div>
            <div>
                <img src="~/Images/Image2.jgp" name="imgItem" />
                <span name="ItemName">Camera</span>
                <img src="~/Images/AddItem.jpg" name="AddItem" onclick="addItem()" />
            </div>
            <div>
                <img src="~/Images/Image3.jgp" name="imgItem" />
                <span name="ItemName">iPhone</span>
                <img src="~/Images/AddItem.jpg" name="AddItem" onclick="addItem()" />
            </div>

    When user click on img AddItem, I need to call same function to get the name of Item and the src of Item image.

    I tried to get index or by onclick="addItem(this)".. but I don't know if my code is correct.

    Please if someone can help me for that

    Friday, January 18, 2019 7:22 PM

Answers

  • User475983607 posted

    I think you are looking for "this"?

            <div>
                <img src="~/Images/Image1.jgp" name="imgItem" />
                <span name="ItemName">Laptop</span>
                <img src="~/Images/AddItem.jpg" name="AddItem" onclick="addItem(this)" />
            </div>
            <div>
                <img src="~/Images/Image2.jgp" name="imgItem" />
                <span name="ItemName">Camera</span>
                <img src="~/Images/AddItem.jpg" name="AddItem" onclick="addItem(this)" />
            </div>
            <div>
                <img src="~/Images/Image3.jgp" name="imgItem" />
                <span name="ItemName">iPhone</span>
                <img src="~/Images/AddItem.jpg" name="AddItem" onclick="addItem(this)" />
            </div>
        <script>
            function addItem(item) {
                console.log(item.src);
            }
        </script>

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, January 18, 2019 9:43 PM
  • User475983607 posted
    <script>
        function addItem(item) {
            var nodes = item.parentElement.childNodes;
            console.log(nodes);
            console.log(nodes[1].src);
            console.log(nodes[5].src);
        }
    </script>

    Learn about nodeLists in JavaScript.

    https://www.w3schools.com/js/js_htmldom_nodelist.asp

    https://developer.mozilla.org/en-US/docs/Web/API/NodeList

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, January 18, 2019 11:51 PM

All replies

  • User475983607 posted

    Hello,

    I want to know how to get the index or content of element by tag name when I click on near img.

    Example:

            <div>
                <img src="~/Images/Image1.jgp" name="imgItem"/>
                <span name="ItemName">Laptop</span>
                <img src="~/Images/AddItem.jpg" name="AddItem" onclick="addItem()" />
            </div>
            <div>
                <img src="~/Images/Image2.jgp" name="imgItem" />
                <span name="ItemName">Camera</span>
                <img src="~/Images/AddItem.jpg" name="AddItem" onclick="addItem()" />
            </div>
            <div>
                <img src="~/Images/Image3.jgp" name="imgItem" />
                <span name="ItemName">iPhone</span>
                <img src="~/Images/AddItem.jpg" name="AddItem" onclick="addItem()" />
            </div>

    When user click on img AddItem, I need to call same function to get the name of Item and the src of Item image.

    I tried to get index or by onclick="addItem(this)".. but I don't know if my code is correct.

    Please if someone can help me for that

    You did not post the addItem() code.  

    Friday, January 18, 2019 7:31 PM
  • User-1952516322 posted

    Hello mgebhard,

    This is what I looking for, I need to know what can I write inside the function to do that. 

    Thanks for you

    Friday, January 18, 2019 8:07 PM
  • User475983607 posted

    I think you are looking for "this"?

            <div>
                <img src="~/Images/Image1.jgp" name="imgItem" />
                <span name="ItemName">Laptop</span>
                <img src="~/Images/AddItem.jpg" name="AddItem" onclick="addItem(this)" />
            </div>
            <div>
                <img src="~/Images/Image2.jgp" name="imgItem" />
                <span name="ItemName">Camera</span>
                <img src="~/Images/AddItem.jpg" name="AddItem" onclick="addItem(this)" />
            </div>
            <div>
                <img src="~/Images/Image3.jgp" name="imgItem" />
                <span name="ItemName">iPhone</span>
                <img src="~/Images/AddItem.jpg" name="AddItem" onclick="addItem(this)" />
            </div>
        <script>
            function addItem(item) {
                console.log(item.src);
            }
        </script>

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, January 18, 2019 9:43 PM
  • User-1952516322 posted

    Thanks Mr.mgebhard it's working for same element img just.

    But how can I get the src Image that has name "imgItem" (Not same image has onclick ) , or if I can get the text of span above this

    What I need, when user click on image ( name=Add Item) , how can I get the src image > name=imgItem && text in span ??

    Thanks again Mr. mgebhard for your interest

    Friday, January 18, 2019 11:06 PM
  • User475983607 posted
    <script>
        function addItem(item) {
            var nodes = item.parentElement.childNodes;
            console.log(nodes);
            console.log(nodes[1].src);
            console.log(nodes[5].src);
        }
    </script>

    Learn about nodeLists in JavaScript.

    https://www.w3schools.com/js/js_htmldom_nodelist.asp

    https://developer.mozilla.org/en-US/docs/Web/API/NodeList

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, January 18, 2019 11:51 PM
  • User-1952516322 posted

    THANKS a lot Mr.mgebhard

    It's working find  

    Saturday, January 19, 2019 9:25 AM
  • User-1952516322 posted

    Dear, 

    I want just to ask, is there any way to find the element by name inside this div

    Example:

    <div class="Item" id="ItemNumber">
                <img src="~/Images/Items/Camera_Elec.png" width="130" class="imgItem" />
                <div class="ItemSpec">
                    <div style="">
                        <img src="/Images/Menu/hiddenBox.png" width="270" />
                    </div>
                    <span class="headerItem" name="ItemName">Camera Nikon</span>
                    <span class="itemDetails">
                        Nikon D850 DSLR Camera with AF-S NIKKOR 24-120mm...
                    </span>
    
                    <div class="PriceSection">
                        <div style=" padding-top: 5px; float: left;">
                            <span name="ItemPrice">300 JD</span>
                        </div>
                        <div style="float:left;margin-left:10px">
                            <input type="hidden" value="Electronic" name="hdf" />
                            <img src="/Images/Icons/AddtoCart.png" width="30" onclick="Test(this)" />
                        </div>
                    </div>
                </div>
            </div>

    I want to write this in

     function Test(obj){
    var x = obj.parentElement.ParentElement.ParentElement;
    var y = if I will write this ( x.FindControl ?? this is jQuery but I need to find control inside x )
    var z = OR Like This x.getElementByName ??
    
    I need any way like this please if you know
    }

    Saturday, January 19, 2019 11:34 AM
  • User475983607 posted

    Dear, 

    I want just to ask, is there any way to find the element by name inside this div

    Example:

    <div class="Item" id="ItemNumber">
                <img src="~/Images/Items/Camera_Elec.png" width="130" class="imgItem" />
                <div class="ItemSpec">
                    <div style="">
                        <img src="/Images/Menu/hiddenBox.png" width="270" />
                    </div>
                    <span class="headerItem" name="ItemName">Camera Nikon</span>
                    <span class="itemDetails">
                        Nikon D850 DSLR Camera with AF-S NIKKOR 24-120mm...
                    </span>
    
                    <div class="PriceSection">
                        <div style=" padding-top: 5px; float: left;">
                            <span name="ItemPrice">300 JD</span>
                        </div>
                        <div style="float:left;margin-left:10px">
                            <input type="hidden" value="Electronic" name="hdf" />
                            <img src="/Images/Icons/AddtoCart.png" width="30" onclick="Test(this)" />
                        </div>
                    </div>
                </div>
            </div>

    I want to write this in

     function Test(obj){
    var x = obj.parentElement.ParentElement.ParentElement;
    var y = if I will write this ( x.FindControl ?? this is jQuery but I need to find control inside x )
    var z = OR Like This x.getElementByName ??
    
    I need any way like this please if you know
    }

    This is the 3rd different question in the same post. 

    Khalid Salameh, at least make a minimal effort to learn jQuery selectors and functions.  It is a simply matter of setting aside the time to read the openly published reference documentation. 

    https://api.jquery.com/category/selectors/

    https://api.jquery.com/closest/

    You'll also want to learn how to use the browser's dev tools (F12) for debugging.

    https://developers.google.com/web/tools/chrome-devtools/

    Keep in mind, the name attribute is invalid in  a span tag.  Your responses appear like you are randomly trying constructs without any logical reasoning.  Anyway, use the class, id, or data attributes not name.  The name attribute is used in inputs.  I recommend refreshing you HTML knowledge.

    I built a basic example using your code as is... 

        <script>
            function Test(obj) {
                var elem = obj.closest('.ItemSpec');
                console.log(elem);
    
                var itenName = $(elem).find('[name="ItemName"]').text();
                console.log(itenName);
            }
        </script>

    Saturday, January 19, 2019 2:15 PM
  • User-1952516322 posted

    Dear,

    I know how to use F12 Developer tools for debugging, and the code you wrote it, its for jQuery. I know it, but my question for javascript. 

    however, thanks a lot for your interest. and for your answer  :-)

    Saturday, January 19, 2019 9:34 PM