Spostare oggetti

**MaryP** · 02-01-2016, 11:15

Salve!
Premetto che sono una principiante e un’autodidatta di JS.
Ho due oggetti, vorrei che quando clicco sul primo, l’altro si spostasse. Ho scritto questo codice ma non funziona. Dove sbaglio?

<html>
<head>
<script type="text/javascript">
function myfunction(v) {
var obj = document.getElementById(v);
var currentPosition = parseInt(obj.style.top)
var amountToMove = 30

obj.style.top = currentPosition+amountToMove+"px";
}
</script>
</head>

<body>

<button onclick="myfunction(b)" style="position:absolute; left:100px; top:10px; border:1px black outset; width:160px;">Clicca qui</button>
<div id="b" style="position:absolute; left:100px; top:40px; border:1px black outset; width:160px;">B</div>

</body>
</html>

Grazie dell’aiuto

**lucavizzi** · 02-01-2016, 13:19

Sbagli a passare il parametro alla funzione. Se lo passi senza apici, "b" sarà una variabile non definita.

codice:

 
<button onclick="myfunction('b')" style="position:absolute; left:100px; top:10px; border:1px black outset; width:160px;">Clicca qui</button>

**MaryP** · 02-01-2016, 15:08

Grazie mille

.

Faccio un’altra domanda.

Se io avessi tre oggetti (A, B e C);
A e B sono sempre visibili e alienati uno sotto l’altro; mentre C non è visibile
Al click su A, vorrei che B si spostasse verso il basso e C si rendesse visibile e si posizionasse fra A e B.

Come dovrei modificare il mio codice?
Grazie ancora

**lucavizzi** · 02-01-2016, 16:58

Originariamente inviata da MaryP

Grazie mille

.

Faccio un’altra domanda.

Se io avessi tre oggetti (A, B e C);
A e B sono sempre visibili e alienati uno sotto l’altro; mentre C non è visibile
Al click su A, vorrei che B si spostasse verso il basso e C si rendesse visibile e si posizionasse fra A e B.

Come dovrei modificare il mio codice?
Grazie ancora

Prego ;-)

Per rendere un elemento invisibile si può usare la regola css: display:none

codice:

<div style="display:none" id="hidden_div">div content</div>

Per renderlo visibile tramite js:

codice:

document.getElementById('hidden_div').style.display='block';

Se vuoi che l'elemento C sia equidistante da A e B, dovrai posizionarlo, tramite la proprietà "top", in maniera analoga allo spostamento di B.

**MaryP** · 03-01-2016, 12:06

Salve.

Se volessi eseguire solo una volta questo script, come lo dovrei modificare?

<script type="text/javascript">
function myfunction(v) {
var obj = document.getElementById(v);
var currentPosition = parseInt(obj.style.top)
var amountToMove = 30

obj.style.top = currentPosition+amountToMove+"px";
}
</script>

Grazie

**lucavizzi** · 03-01-2016, 13:59

Potresti usare una variabile globale di tipo boolean.
In questo esempio passo alla funzione un secondo parametro con l'id dell'elemento da mostrare

codice:

<button onclick="myfunction('b','c')" style="position:absolute; left:100px; top:10px; border:1px black outset; 
width:160px;">Clicca qui</button>



<script type="text/javascript">

var is_visible=false; // variabile globale

function myfunction(v,c) {
   var obj = document.getElementById(v);
   var currentPosition = parseInt(obj.style.top)
   var amountToMove = 30
    obj.style.top = currentPosition+amountToMove+"px";

   if(!is_visible){
      document.getElementById(c).style.display='block';
      is_visible=true;
   }
}
</script>

**MaryP** · 04-01-2016, 17:50

Grazie tanto. In realtà, lo script x il mio scopo è questo

<script type="text/javascript">

var is_visible=false; // variabile globale

function myfunction(v,c) {
var obj = document.getElementById(v);
var currentPosition = parseInt(obj.style.top);
var amountToMove = 30;

if(!is_visible){
document.getElementById(c).style.display='block';
is_visible=true;
obj.style.top = currentPosition+amountToMove+"px";
}
}
</script>

**lucavizzi** · 04-01-2016, 18:15

Originariamente inviata da MaryP

Grazie tanto. In realtà, lo script x il mio scopo è questo

<script type="text/javascript">

var is_visible=false; // variabile globale

function myfunction(v,c) {
var obj = document.getElementById(v);
var currentPosition = parseInt(obj.style.top);
var amountToMove = 30;

if(!is_visible){
document.getElementById(c).style.display='block';
is_visible=true;
obj.style.top = currentPosition+amountToMove+"px";
}
}
</script>

quindi volevi eseguire una sola volta anche lo spostamento.

Discussione: Spostare oggetti

Strumenti discussione

Ricerca discussione

Visualizza

Spostare oggetti

Permessi di invio