• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Podmiana wartości input a, na wartość input b po kliknięciu przycisku. problem z atrybutem name.

VPS Starter Arubacloud
0 głosów
1,414 wizyt
pytanie zadane 12 lipca 2017 w JavaScript przez Wojtek Janiak Nowicjusz (170 p.)

Cześć, uczę się dopiero JavaScriptu. Moim celem jest podmiana wartości value w input o name="quantity[509]" na wartość value inputa o name="a" po kliknięciu przycisku. Czy ktoś mi jest w stanie wyjaśnić, dlaczego wersja 1 działa, a wersja 2 nie? Zmienia się tylko nazwa. Czy nawias [] tutaj przeszkadza? W jaki sposób zrobić to, tak, żeby funkcja działała z nawiasem?
Wersja 1


<code>
<html>
<body>
<script language="javascript">
<!--
function zmiana(){
document.moj.b.value=document.moj.a.value
}
-->
</script>
<form name="moj">
<input type="text" name="a">
<input type="number" class="input-text qty text" step="1" min="0" max="" name="b" value="0" title="Szt." size="4" pattern="[0-9]*" inputmode="numeric">
<button type="button" onclick="zmiana()">Antał</button>
</form>
</body>
</html></code>


Wersja 2


<code><html>
<body>
<script language="javascript">
<!--
function zmiana(){
document.moj.quantity[509].value=document.moj.a.value
}
-->
</script>
<form name="moj">
<input type="text" name="a">
<input type="number" class="input-text qty text" step="1" min="0" max="" name="quantity[509]" value="0" title="Szt." size="4" pattern="[0-9]*" inputmode="numeric">
<button type="button" onclick="zmiana()">Antał</button>
</form>
</body>
</html>
</code>

 

2 odpowiedzi

0 głosów
odpowiedź 13 lipca 2017 przez Jedras Maniak (54,860 p.)
wybrane 13 lipca 2017 przez Wojtek Janiak
 
Najlepsza
komentarz 13 lipca 2017 przez Wojtek Janiak Nowicjusz (170 p.)
Dziękuje za pomoc :)
komentarz 13 lipca 2017 przez Wojtek Janiak Nowicjusz (170 p.)

A gdybym chciał button zastąpić divem po którego wczytaniu uruchamia się funkcja?
 

	
	
	<html>

<form>
    <input style="display: none;" name="a" type="text" value="3" />
	  <input style="display: none;" name="b" type="text" value="2" />
	  <input style="display: none;" name="c" type="text" value="1" />
	  <input style="display: none;" name="d" type="text" value="1" />
	  <input style="display: none;" name="e" type="text" value="2" />
	  <input style="display: none;" name="f" type="text" value="3" />
	  <input style="display: none;" name="g" type="text" value="3" />
	  <div onclick="zmiana()"</div>
	 
</form>



<script type="text/javascript">
    function zmiana(){
      document.getElementsByName('quantity[509]')[0].value=document.getElementsByName("a")[0].value;
	  document.getElementsByName('quantity[343]')[0].value=document.getElementsByName("b")[0].value;
	  document.getElementsByName('quantity[511]')[0].value=document.getElementsByName("c")[0].value;
	  document.getElementsByName('quantity[339]')[0].value=document.getElementsByName("d")[0].value;
	  document.getElementsByName('quantity[400]')[0].value=document.getElementsByName("e")[0].value;
	  document.getElementsByName('quantity[372]')[0].value=document.getElementsByName("f")[0].value;
	  document.getElementsByName('quantity[361]')[0].value=document.getElementsByName("g")[0].value;
	  
    }
    </script>
      
      </html>
	  
	  <form>
      <input  name="quantity[509]" type="text" value="0" />
	  <input  name="quantity[343]" type="text" value="0" />
	  <input  name="quantity[511]" type="text" value="0" />
	  <input  name="quantity[339]" type="text" value="0" />
	  <input  name="quantity[400]" type="text" value="0" />
	  <input  name="quantity[372]" type="text" value="0" />
	  <input  name="quantity[361]" type="text" value="0" />
	  
	 
</form>
	  
	 

 

+1 głos
odpowiedź 12 lipca 2017 przez Comandeer Guru (604,920 p.)

Podstawy składni JS. Nawiasy kwadratowe służą do odwoływania się do własności obiektów. Stąd drugi przykład nie działa. Jak już to [ 'quantity[509]' ].

PS ten skrypt wygląda jakby pochodził z tamtego tysiąclecia…

komentarz 12 lipca 2017 przez niezalogowany
Z 1999 roku. :)
komentarz 12 lipca 2017 przez Wojtek Janiak Nowicjusz (170 p.)
Czy mógłbyś wstawić ten element, który napisałeś do kodu, który podałem tak, żeby działało? Bo ja wstawiam i mi nie działa. Chodzi o zasadę, jak poradzić sobie z [ ] pracuję "nad czymś bardziej ambitnym, ale nie wiem jak sobie z tym poradzić.
1
komentarz 12 lipca 2017 przez Comandeer Guru (604,920 p.)

document.moj[ 'quantity[509]' ].value

komentarz 12 lipca 2017 przez Wojtek Janiak Nowicjusz (170 p.)
Super. Teraz działa :) dziękuję bardzo
komentarz 13 lipca 2017 przez Wojtek Janiak Nowicjusz (170 p.)
edycja 13 lipca 2017 przez Wojtek Janiak

W jaki sposób napisał byś taki skrypt? Nie ukrywam, męczę się od kilku godzin i nie mogę tego ogarnąć.

Mi udało się zdziałać coś takiego. Nie wiem gdzie zrobiłem błąd, że to nie działa:
 


<html>

<script type="text/javascript">
function zmiana(){
document.getElementByName[ 'quantity[509]' ].value=document.getElementByName("a").value
}
</script>



<form name="ala"><input style="display: none;" name="a" type="text" value="3" /></form>

<form class="cart">
<input class="input-text qty text" title="Szt." max="" min="0" name="quantity[509]" pattern="[0-9]*" size="4" step="1" type="number" value="0" /></form>
<button type="button" onclick="zmiana()">Zamień wartości</button>

</html>

 

komentarz 13 lipca 2017 przez Comandeer Guru (604,920 p.)

Bo jest getElementsByName, co zwraca kolekcję elementów, a nie pojedynczy element. Polecam zapoznać się z devtools przeglądarki – ułatwi Ci pracę.

1
komentarz 13 lipca 2017 przez niezalogowany
Wojtek, tak Ci chyba będzie najłatwiej.

https://codepen.io/GeneralXavi/pen/KqJpyY

/edit

ahh, nie zauważyłem że ktoś Ci już pomógł. No nieważne, może skorzystasz. Moim zdaniem wygodniej skorzystać z querySelector, bo dostaniesz jeden element, a nie kolekcję.
komentarz 14 lipca 2017 przez Wojtek Janiak Nowicjusz (170 p.)

Dziękuję za kolejny sposób. Im więcej rozwiązań tym lepiej. Więcej się uczę. :) Mam taki problem. Chciałbym, żeby funkcja wykonywała się po wczytaniu elementu. Mój kod nie działa.


	
	<html>

<form>
    <input style="display: none;" name="a" type="text" value="3" />
	  <input style="display: none;" name="b" type="text" value="2" />
	  <input style="display: none;" name="c" type="text" value="1" />
	  <input style="display: none;" name="d" type="text" value="1" />
	  <input style="display: none;" name="e" type="text" value="2" />
	  <input style="display: none;" name="f" type="text" value="3" />
	  <input style="display: none;" name="g" type="text" value="3" />
	  <div onclick="zmiana()"</div>
	 
</form>



<script type="text/javascript">
    function zmiana(){
      document.getElementsByName('quantity[509]')[0].value=document.getElementsByName("a")[0].value;
	  document.getElementsByName('quantity[343]')[0].value=document.getElementsByName("b")[0].value;
	  document.getElementsByName('quantity[511]')[0].value=document.getElementsByName("c")[0].value;
	  document.getElementsByName('quantity[339]')[0].value=document.getElementsByName("d")[0].value;
	  document.getElementsByName('quantity[400]')[0].value=document.getElementsByName("e")[0].value;
	  document.getElementsByName('quantity[372]')[0].value=document.getElementsByName("f")[0].value;
	  document.getElementsByName('quantity[361]')[0].value=document.getElementsByName("g")[0].value;
	  
    }
    </script>
      
      </html>
	  
	  <form>
      <input  name="quantity[509]" type="text" value="0" />
	  <input  name="quantity[343]" type="text" value="0" />
	  <input  name="quantity[511]" type="text" value="0" />
	  <input  name="quantity[339]" type="text" value="0" />
	  <input  name="quantity[400]" type="text" value="0" />
	  <input  name="quantity[372]" type="text" value="0" />
	  <input  name="quantity[361]" type="text" value="0" />
	  
	 
</form>

 

komentarz 14 lipca 2017 przez niezalogowany

Jakiego elementu? Znaczniki <script> </script> powinny być zawsze na końcu body, wtedy będziesz miał pewność, że Ci się wszystko wczyta. 

 Więcej się uczę. :)

No chyba się nie uczysz, bo wciąż masz on-click. 

Podpinanie zdarzeń

komentarz 15 lipca 2017 przez Wojtek Janiak Nowicjusz (170 p.)

Przepraszam. Wkleiłem zły kod. 

Zrobiłem to tak:
 

	
	
	<html>

<form>
    <input style="display: none;" name="a" type="text" value="3" />
	  <input style="display: none;" name="b" type="text" value="2" />
	  <input style="display: none;" name="c" type="text" value="1" />
	  <input style="display: none;" name="d" type="text" value="1" />
	  <input style="display: none;" name="e" type="text" value="2" />
	  <input style="display: none;" name="f" type="text" value="3" />
	  <input style="display: none;" name="g" type="text" value="3" />
	  <div onload="zmiana()"</div>
	 
</form>



<script type="text/javascript">
    function zmiana(){
      document.getElementsByName('quantity[509]')[0].value=document.getElementsByName("a")[0].value;
	  document.getElementsByName('quantity[343]')[0].value=document.getElementsByName("b")[0].value;
	  document.getElementsByName('quantity[511]')[0].value=document.getElementsByName("c")[0].value;
	  document.getElementsByName('quantity[339]')[0].value=document.getElementsByName("d")[0].value;
	  document.getElementsByName('quantity[400]')[0].value=document.getElementsByName("e")[0].value;
	  document.getElementsByName('quantity[372]')[0].value=document.getElementsByName("f")[0].value;
	  document.getElementsByName('quantity[361]')[0].value=document.getElementsByName("g")[0].value;
	  
    }
    </script>
      
      </html>
	  
	  <form>
      <input  name="quantity[509]" type="text" value="0" />
	  <input  name="quantity[343]" type="text" value="0" />
	  <input  name="quantity[511]" type="text" value="0" />
	  <input  name="quantity[339]" type="text" value="0" />
	  <input  name="quantity[400]" type="text" value="0" />
	  <input  name="quantity[372]" type="text" value="0" />
	  <input  name="quantity[361]" type="text" value="0" />
	  
	 
</form>
	  
	 

 

komentarz 15 lipca 2017 przez Wojtek Janiak Nowicjusz (170 p.)
Chciałbym po prostu, żeby funkcja zmiana zaczytała się wraz z wczytaniem strony/elementu. Ma się po prostu wykonać. Nie chcę tego wymusić przez <body onload="zmiana()">  szukam innego sposobu.
1
komentarz 15 lipca 2017 przez niezalogowany
edycja 15 lipca 2017

Jest parę sposobów. Możesz:

readystatechange

W każdym razie na pewno zapomnij o <body onload oraz o "onclick". 


(możesz też wywołać tą funkcję po prostu na końcu body, za pomocą zmiana(), ale to to chyba wiesz? ;)) 

komentarz 16 lipca 2017 przez Wojtek Janiak Nowicjusz (170 p.)

Udało mi się osiągnąć to co chcialem. Tak to wygląda, co o tym myślicie:

 


	
	
	
	
	<html>

<form>
      <input style="display: none;" name="a" type="text" value="3" />
	  <input style="display: none;" name="b" type="text" value="2" />
	  <input style="display: none;" name="c" type="text" value="1" />
	  <input style="display: none;" name="d" type="text" value="1" />
	  <input style="display: none;" name="e" type="text" value="2" />
	  <input style="display: none;" name="f" type="text" value="3" />
	  <input style="display: none;" name="g" type="text" value="3" />
	  
	 
</form>
<!-- <div onload="zmiana()"</div> -->


<script type="text/javascript">
    function zmiana(){
      document.getElementsByName(x)[0].value=document.getElementsByName("a")[0].value;
	  document.getElementsByName('quantity[343]')[0].value=document.getElementsByName("b")[0].value;
	  document.getElementsByName('quantity[511]')[0].value=document.getElementsByName("c")[0].value;
	  document.getElementsByName('quantity[339]')[0].value=document.getElementsByName("d")[0].value;
	  document.getElementsByName('quantity[400]')[0].value=document.getElementsByName("e")[0].value;
	  document.getElementsByName('quantity[372]')[0].value=document.getElementsByName("f")[0].value;
	  document.getElementsByName('quantity[361]')[0].value=document.getElementsByName("g")[0].value;
	  
    }
    </script>
      
      </html>
	  
	  <form>
      <input  name="quantity[509]" type="text" value="0" />
	  <input  name="quantity[343]" type="text" value="0" />
	  <input  name="quantity[511]" type="text" value="0" />
	  <input  name="quantity[339]" type="text" value="0" />
	  <input  name="quantity[400]" type="text" value="0" />
	  <input  name="quantity[372]" type="text" value="0" />
	  <input  name="quantity[361]" type="text" value="0" />
	  
<script type="text/javascript">
document.getElementsByName('body').onload = zmiana();
</script>	 
</form>

 

Podobne pytania

0 głosów
1 odpowiedź 1,650 wizyt
pytanie zadane 23 maja 2017 w HTML i CSS przez ayo1001 Obywatel (1,890 p.)
0 głosów
2 odpowiedzi 1,770 wizyt
–1 głos
1 odpowiedź 742 wizyt

93,018 zapytań

141,988 odpowiedzi

321,281 komentarzy

62,364 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj

Wprowadzenie do ITsec, tom 2

Można już zamawiać tom 2 książki "Wprowadzenie do bezpieczeństwa IT" - będzie to około 650 stron wiedzy o ITsec (17 rozdziałów, 14 autorów, kolorowy druk).

Planowana premiera: 30.09.2024, zaś planowana wysyłka nastąpi w drugim tygodniu października 2024.

Warto preorderować, tym bardziej, iż mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy dodatkowe 15% zniżki! Dziękujemy zaprzyjaźnionej ekipie Sekuraka za kod dla naszej Społeczności!

...