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 (602,340 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…

Pokaż 8 poprzednich komentarzy

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>