problemi con un codice

**hobbyeidee** · 25-02-2022, 19.59.45

Ciao gruppo, potreste spiegarmi come modificare questo codice?
Int pratica vorrei quando scelgo uno dei 3 "radio", vorrei che comparisse accanto, oppure sotto al pulsante una scritta ed una cella per inserire i dati.
Inoltre vorrei che la casella dati avesse l'aspetto lo stile impostato in "Va" e non avesse al suo interno la scritta valore

Per adesso riesco a far comparire la casella testo ma sotto a tutto e con il problema grafico.

Grazie per l'aiuto

Codice HTML:

<html> 
<head> 
<style>
input.Va { width:50px; border-radius:5px; background-color: white; color:black; font-size:20px; border-style:solid; border-color:#6AB234; vertical-align:middle; text-align:center; margin:5px;}
</style>

<script language="javascript"> 
<!-- 

function campo(opzione,num){ 
if (num==1){ 
div = document.getElementById('divTesto') 
if(opzione=="Attiva"){ 
div.innerHTML='<input type=text name=nome value=valore>' 
} 
else 
div.innerHTML='' 
} 
else if (num==2){ 
div = document.getElementById('divTesto2') 
if(opzione=="Attiva"){ 
div.innerHTML='<input type=text name=nome2 value=valore2>' 
} 
else 
div.innerHTML='' 
} 
} 
//--> 
</script> 

<input type="radio" name="scelta" onClick="campo('Disattiva',1);"> 
Singolo 
<br>
<input type="radio" name="scelta" onClick="campo('Attiva',1);"> 
Serie
<br>
<input type="radio" name="scelta" onClick="campo('Attiva',1);"> 
Parallelo
<div class="Va" id="divTesto"></div> 
</form> 
</body>

**alemoppo** · 25-02-2022, 21.49.44

Invece di innerHTML potresti abilitare la visibilità tramite javascript.
Se vuoi applicare la classe ".Va" al div, perché l'hai dichiarata "input.Va"?
Se non ho capito male, cerchi una cosa del tipo

Codice HTML:

<!doctype html>
<html> 
  <head> 
    <title> test form </title>
    <style>
      .Va { width:300px; border-radius:5px; background-color: white; color:black; font-size:20px; border-style:solid; border-color:#6AB234; vertical-align:middle; text-align:center; margin:5px; visibility:hidden}
    </style>
    <script> 
    function campo(type)
    { 
      /*nascondo tutti e tre gli elementi*/
      document.getElementById('divSingolo').style.visibility = 'hidden';
      document.getElementById('divSerie').style.visibility = 'hidden';
      document.getElementById('divParallelo').style.visibility = 'hidden';

      /*mostro solo quello cliccato*/
      document.getElementById('div'+type).style.visibility = 'visible';
    } 
    </script> 
  </head>
  <body>
    <form>
      <input type="radio" name="scelta" onClick="campo('Singolo');" id="inputSingolo">		<label for="inputSingolo">Singolo</label> 		<div class="Va" id="divSingolo">contenuto per singolo <input type="text" name="nome1" value="valore1"></div>
      <input type="radio" name="scelta" onClick="campo('Serie');" id="inputSerie">		<label for="inputSerie">Serie</label> 			<div class="Va" id="divSerie">contenuto per serie <input type="text" name="nome2" value="valore2"></div>
      <input type="radio" name="scelta" onClick="campo('Parallelo');"  id="inputParallelo">	<label for="inputParallelo">Parallelo</label> 	<div class="Va" id="divParallelo">contenuto per parallelo <input type="text" name="nome3" value="valore3"></div>
    </form> 
  </body> 
</html>

Ciao!

**dreadnaut** · 25-02-2022, 22.03.47

Dovresti riuscirci anche senza Javascript:

Codice HTML:

<!doctype html>
<html><head>
  <style>
    .nascosto {
      display: none;
    }
    .mostra:checked ~ .nascosto {
      display: initial;
    }
  </style>
</head><body>
  <div>
    <input class="mostra" type="radio" name="scelta" id="scelta-1" />
    <label for="scelta-1">Singolo</label>
    <div class="nascosto">
      <p>Contenuto per singolo
    </div>
  </div>
  <div>
    <input class="mostra" type="radio" name="scelta" id="scelta-2" />
    <label for="scelta-2">Serie</label>
    <div class="nascosto">
      <p>Contenuto per serie
    </div>
  </div>
  <div>
    <input class="mostra" type="radio" name="scelta" id="scelta-3" />
    <label for="scelta-3">Parallelo</label>
    <div class="nascosto">
      <p>Contenuto per parallelo
    </div>
  </div>
</body></html>

Nota il CSS ".mostra:checked ~ .nascosto { ... }" che mira ad ogni .nascosto che segue un radio button selezionato.

Visto che ci sono i <label>, puoi anche decidere di nascondere i radio button. Continueranno a funzionare anche nascosti, e puoi dare ai <label> lo stile che preferisci.

**hobbyeidee** · 26-02-2022, 13.19.11

Grazie per le info

Vi spiego in pratica mi piacerebbe avere sulla riga della selezione o sotto di questa, non so come stia meglio a livello estetico, quindi vorrei capire come impostare il codice per una ipotesi o per l'altra, un riga che usi la grafica come quella del codice che riporto con scritto inserire i dati.

Poi questa dovrà essere usata in due modi diversi oppure non tenuta in considerazione in una funzione matematica per calcolare il valore finale in base alla scelta fatta, ma questo credo di saperlo fare, ripeto credo

Però ci penserò dopo, una cosa per volta.

P.s. riporto solo la parte di codice grafico, intanto tento leggo i vostri consigli cercando di capire meglio come funziona il codice che mi avete riportato :)

Codice HTML:

<style>
.table{display:table; widht:500px; text-align: center;}

.tr{display:table-row;}

.td{display:table-cell; text-align: center;}

.intestazione{
color:red;
font-size: 30px;
text-align: left;
margin: 20px;
}

.intestazione_dati1{
display:table-cell;
border:none;
color:black;
font-size: 20px;
text-align: left;
margin-left: 30px;
font-variant: small-caps;
}

input.Va { width:50px; border-radius:5px; background-color: white; color:black; font-size:20px; border-style:solid; border-color:#6AB234; vertical-align:middle; text-align:center; margin:5px;}

</style>

<div class="table">
	<div class="tr">
	  <div class="intestazione_dati1">Inserire i dati</div>
      <div class="td"><input type="text" class="Va" id="circuito" size="6"></div>
	</div>
    
</div>
    <br>
    <p class="intestazione dati1">
    <p class="intestazione_dati1"> selezionare il tipo di installazione<p>
    
    <body>
	<form class="intestazione_dati1">
    
	<input type="radio" name="scelta" onClick="campo('Disattiva',1);"> 
	Singolo
	<br>
	<input type="radio" name="scelta" onClick="campo('Attiva',1);"> 
	Serie
	<br>
	<input type="radio" name="scelta" onClick="campo('Attiva',1);"> 
	Parallelo

**dreadnaut** · 26-02-2022, 15.17.13

La tua spiegazione non è chiarissima

Ha a che fare con questo?

26-02-2022, 15.27.49

Salve sono che non è il reparto giusto per scrivere il mio problema, sono nuovo sul blog, ho caricato tramite filezilla uno script in php, quando apro il sito principale cioè bazarambusiness.it mi restituisce l'errore HTTP 500 ERROR, sapreste dirmi come risolvere il problema ? Grazie.

**GraphOGLRisorse** · 26-02-2022, 16.07.16

Salve avid3849338,
se intende un plugin, provi da recovery.

Nel caso non si riferisca ad un plugin, può mostrare lo script che crea il problema?

Al fine di non creare confusione con la discussione in corso, qualora il problema non sia risolvibile da recovery, le sugerisco di aprire una nuova discussione nella sezione relativa a php e di spiegare con maggiore cura il suo problema rispondendo anche alla domanda.

Cordiali saluti.

**hobbyeidee** · 26-02-2022, 16.51.36

Originalmente inviato da dreadnaut

La tua spiegazione non è chiarissima

Ha a che fare con questo?

Si esatto

Ho provato ad usare i vostri consigli e sono arrivato a sistemare la grafica come piace a me, o meglio nella sezione in cui posso compilare la pagina prima di pubblicarla se clicco su anteprima nel blocco html è tutto ok
Mentre se pubblico la pagina la grafica cambia come mai ?

Vi allego due foto per capire come la vedo io

Un'altra domanda volendo inserire due if nella funzione calc collegati uno al button radio "serie", altro a quello "parallelo", quale valore devo calcolare del button per l'if?
Domani comunque torno a lavoraci

P.s. non so se ho scritto il codice in modo corretto o mi sono perso qualche chiusura di div o altro

Vi linko la pagina in cui ho anche inserito le foto https://hobbyeidee.altervista.org/1455-2/

Codice HTML:

<!doctype html>
<html>
<head>
<style>
.table{display:table; widht:500px; text-align: center;}

.tr{display:table-row;}

.td{display:table-cell; text-align: center;}

.intestazione{
color:red;
font-size: 30px;
text-align: left;
margin: 20px;
}

.intestazione_dati1{
display:table-cell;
border:none;
color:black;
font-size: 20px;
text-align: left;
margin-left: 30px;
font-variant: small-caps;
}

.risultato{
color:darkgreen;
font-size: 20px;
margin-left: 30px;
font-variant: small-caps;
}

input[type=radio]:hover {
background-color: lightgreen;
}

.formula{
color:#6AB234;
font-size: 20px;
text-align: center;
text-decoration: underline;
text-decoration-color: red;
text-decoration-style: wavy; 
margin-left: 40px;
margin-top: 20px;
}
input[type=text]:focus {
background-color: lightgreen;
}
input.Va { width:50px; border-radius:5px; background-color: white; color:black; font-size:20px; border-style:solid; border-color:#6AB234; vertical-align:middle; text-align:center; margin:5px;}

.Vc { width:300px; background-color: white; color:black; font-size:20px; font-variant: small-caps; vertical-align:middle; text-align:center; margin:5px; visibility:hidden}

.button {
  background-color: #4CAF50; /* Green */
  border: none;
  color: white;
  padding: 16px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 12px 2px;
  transition-duration: 0.4s;
  cursor: pointer;
  padding: 10px 24px;
}

.button span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.4s;
}

.button span:after {
  content: 'Ω';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.4s;
}

.button:hover span {
  padding-right: 25px;
}

.button:hover span:after {
  opacity: 1;
  right: 0;
}

.button1 {
  background-color: #6AB234; 
  color: black; 
  border: 2px solid #4CAF50;
}

.button1:hover {
  background-color: gray;
  color: white;
}

</style>
<p class="intestazione">Calcolo resistenza per led </p>  

<div class="table">
	<div class="tr">
	  <div class="intestazione_dati1">Alimentazione circuito in V (Va)</div>
      <div class="td"><input type="text" class="Va" id="circuito" size="6"></div>
	</div>
    
    <div class="tr">
	  <div class="intestazione_dati1">Alimentazione led in V (Vl)</div>
      <div class="td"><input type="text" class="Va" id="caduta" size="6"></div>
	</div>
    
	<div class="tr">
	  <div class="intestazione_dati1">Corrente funzionamento led in mA (A)</div>
      <div class="td"><input type="text" class="Va" id="ampere" size="6"></div>
	</div>
</div>
    <br>
    <p class="intestazione dati1">
    </p><p class="intestazione_dati1"> selezionare il tipo di installazione in caso di più led</p><p>

	</p><form class="intestazione_dati1">
    
    
    
      <input type="radio" name="scelta" onclick="campo('AltriLed');" id="inputSerie">	
      <label for="inputSerie">Serie</label> 
      <br>
      <input type="radio" name="scelta" onclick="campo('AltriLed');" id="inputParallelo">	
      <label for="inputParallelo">Parallelo</label> 
      <br>
    <div id="divAltriLed" class="Vc">Inserire il numero di led <input type="text" class="Va" name="nome2" id="led"></div>
    </form>
    	    <button input="" type="button" class="button button1" onclick="calc()" value="Calcola" style="vertical-align:middle"><span>Calcola </span></button>
	  
    <br>
    <div class="tr"> 
      <div class="risultato"><span class="" id="Resistenza"></span></div>
      
    <script language="javascript"> 
	<!-- 

function campo(type)
    { 
      /*nascondo tutti e tre gli elementi*/
      document.getElementById('divAltriLed').style.visibility = 'hidden';

      /*mostro solo quello cliccato*/
      document.getElementById('div'+type).style.visibility = 'visible';
    } 
	//--> 
    
    function calc(){

    Alimentazione = parseFloat(document.getElementById("circuito").value);
    Caduta = document.getElementById("caduta").value;
    Ampere = document.getElementById("ampere").value;
    document.getElementById("Resistenza").innerHTML = "<h3> Resistenza: "  +           
    Math.round((Alimentazione-Caduta)/(Ampere / 1000)) + "</h3>";
	}
    
	</script>
</div>
</html>

**hobbyeidee** · 28-02-2022, 11.40.51

Ciao gruppo, ho finito di scrivere il codice, funziona ma ho sempre il problema di grafica, in anteprima ho la grafica che voglio mentre pubblicato ho la grafica completamente sballata, non capisco dove sbaglio

Vi metto il link della pagina, il codice è chilometrico.

https://hobbyeidee.altervista.org/1455-2/

Grazie ancora

Discussione: problemi con un codice

LinkBack

Strumenti discussione

Display

problemi con un codice

Regole di scrittura