Как изменить текст на странице с помощью JS, если элементы имеют одинаковое название?

Question

[tr1ck1]

И снова всем привет.
Хочу поменять значение в сбербанк онлайн. Имеется несколько карт и вкладов. Нужно поменять в одном. Все они называются одинаково. Что именно нужно добавить или искать в коде, чтобы изменить конкретный элемент?
document.querySelector('span.overallAmount').textContent = '100 000.00 руб.'; (изменяет самый первый)

Comments

[0xD34F]

изменить конкретный элемент

И чем же он конкретен? Ну, за исключением того, что вы его своим взглядом сверлите.

[tr1ck1]

0xD34F, Я не понял вашего вопроса.

[0xD34F]

tr1ck1, то есть, вы и сами не знаете, что за элемент собираетесь менять. Как будете знать - приходите.

[tr1ck1]

Martovitskiy, Я же написал пояснение в комментарии к самому вопросу..
Эл-т называется span.overallAmount (такое же название имеют и др. эл-ты), но изменить значение нужно в одном конкретном. Как это сделать? Сейчас изменяется с помощью document.querySelector('span.overallAmount').textContent = '100 000.00 руб.' лишь в одном (самом первом).

[Martovitskiy]

tr1ck1, тогда необходимо использовать querySelectorAll и указывать индекс элемента

[tr1ck1]

Martovitskiy,

<script type="text/javascript">
    function showFullInfo(url)
    {
        window.location = url;
    }
</script>


<div class="forProductBorder mainProductInfo">
    <div class="productCover activeProduct needMonyeBox">
        
        
        
        <div class="pruductImg ">
            
            <a href="/PhizIC/private/cards/info.do?id=531612120" ><img src="https://stat.online.sberbank.ru/PhizIC-res/31.0/commonSkin/images/cards_type/icon_cards_vc64.gif" alt="Visa Classic" onerror="onImgError(this)" border="0"/></a>
            
	        <div class="cardType">
	            Дебетовая
	        </div>
	    
        </div>

        <div class="all-about-product">
           
               <div class="productTitle">
                   <div class="productTitleText  ">
                       <table width="100%">
                           <tr>
                               <td class="alignTop">
                                   <div class="productName">
                                       <div class="titleName">
                                           <div class="description">
                                               
		    
		        
		            
		        
		        
		        
		    
		
                                           </div>
                                           <div class="clear"></div>
                                           <div class="float">
                                               <span class="titleBlock" title="Visa Classic">
                                                   <a ><span class="mainProductTitle mainProductTitleLight" onclick="showFullInfo('/PhizIC/private/cards/info.do?id=531612120');">Visa Classic</span>
        </a>
                                               </span>&nbsp;
                                               
                                           </div>
                                       </div>
                                       
                                   </div>
                               </td>
                               <td class="productButtonsAndOperations">
                                    <table class="floatRight" id="">
                                        <tr>
                                            <td>
                                                <div class="productAmount">
                                                    <div class="productCenter">
	    
	    
	    
	    

	    
	    
	    
	      
	        
	        
	                
	                    
	                    
	                        
	                            
	                            
	                                <span class="overallAmount nowrap">190,33 руб.</span>
	                            
	                        

	                        
	                    
	                
	                <br />
	        
	      
	    
	</div>
                                                </div>
                                            </td>
                                            <td class="alignMiddle">
                                                
                                                
                                                    <div class="productRight">
        
            
            
                <span class="prodStatus">

[tr1ck1]

Martovitskiy, Я так понимаю, это код конкретного эл-та. Нужно id учесть?

[Martovitskiy]

tr1ck1, да, правильнее будет

document.querySelector('span.overallAmount')[0].textContent = '100 000';

Ниже zendor тоже об этом написал

[tr1ck1]

Martovitskiy, А как узнать, что вместо 0 записывать?

[Martovitskiy]

tr1ck1, только высчитать порядковый номер.

[tr1ck1]

Martovitskiy, При постановке значения от 0 - толку нет. Даже в первом прекращает изменять.

[zendor]

Martovitskiy, querySelectorAll.

[Martovitskiy]

zendor, я и писал об этом...
---------
тогда необходимо использовать querySelectorAll и указывать индекс элемента
--------
выше просто не дописал All в примере

[Martovitskiy]

id у него есть? Чем он отличается от других?

Answer 1

[zendor]

document.querySelectorAll('span.overallAmount')[0].textContent = '100 000';

Где [0] указываете индекс элемента.

Comments

[tr1ck1]

А где в коде узнать индекс этого эл-та? Я так понимаю, вот это код его.

<script type="text/javascript">
    function showFullInfo(url)
    {
        window.location = url;
    }
</script>


<div class="forProductBorder mainProductInfo">
    <div class="productCover activeProduct needMonyeBox">
        
        
        
        <div class="pruductImg ">
            
            <a href="/PhizIC/private/cards/info.do?id=531612120" ><img src="https://stat.online.sberbank.ru/PhizIC-res/31.0/commonSkin/images/cards_type/icon_cards_vc64.gif" alt="Visa Classic" onerror="onImgError(this)" border="0"/></a>
            
	        <div class="cardType">
	            Дебетовая
	        </div>
	    
        </div>

        <div class="all-about-product">
           
               <div class="productTitle">
                   <div class="productTitleText  ">
                       <table width="100%">
                           <tr>
                               <td class="alignTop">
                                   <div class="productName">
                                       <div class="titleName">
                                           <div class="description">
                                               
		    
		        
		            
		        
		        
		        
		    
		
                                           </div>
                                           <div class="clear"></div>
                                           <div class="float">
                                               <span class="titleBlock" title="Visa Classic">
                                                   <a ><span class="mainProductTitle mainProductTitleLight" onclick="showFullInfo('/PhizIC/private/cards/info.do?id=531612120');">Visa Classic</span>
        </a>
                                               </span>&nbsp;
                                               
                                           </div>
                                       </div>
                                       
                                   </div>
                               </td>
                               <td class="productButtonsAndOperations">
                                    <table class="floatRight" id="">
                                        <tr>
                                            <td>
                                                <div class="productAmount">
                                                    <div class="productCenter">
	    
	    
	    
	    

	    
	    
	    
	      
	        
	        
	                
	                    
	                    
	                        
	                            
	                            
	                                <span class="overallAmount nowrap">190,33 руб.</span>
	                            
	                        

	                        
	                    
	                
	                <br />
	        
	      
	    
	</div>
                                                </div>
                                            </td>
                                            <td class="alignMiddle">
                                                
                                                
                                                    <div class="productRight">
        
            
            
                <span class="prodStatus">

[zendor]

tr1ck1, Посмотрите сколько в коде у вас элементов с таким классом и посчитайте (с нуля).

[tr1ck1]

zendor, Я пытался ставить любую цифру (0, 1, 2 и т.д.) - никакой реакции (даже в первом не изменяет).

[zendor]

tr1ck1,

document.querySelectorAll('span.overallAmount')[0].textContent = '100 000';

Вот это скопируйте, а не то, что вам в комментариях написали, там ошибка.

[tr1ck1]

zendor, Спасибо!