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

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

odpowiedź 13 lipca 2017 przez Jedras Maniak (54,860 p.)
wybrane 13 lipca 2017 przez Wojtek Janiak

Najlepsza

Zamiast getElementByName -> getElementsByName (https://developer.mozilla.org/pl/docs/Web/API/Document/getElementsByName)

Kod:

https://jsfiddle.net/069kgmtg/

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>

odpowiedź 12 lipca 2017 przez Comandeer Guru (604,880 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,880 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,880 p.)

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

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>