I don’t know how do JavaScript function for this. Help

JavaScript
1

This is my HTML Code

<html>
<head>
</head>
<body>
<form>
<h1>Formulario Información Alta Telefónica</h1>
<fieldset>
<legend>Datos personales </legend> 
  <label> Nombre:&nbsp<input type="text" name="nombre"value=""maxlength="30"></label>

  <br/>
<label>Apellidos:&nbsp<input type="text"name="apellidos"value=""maxlength="60"></label>

<br/>

  <label>Direcci&oacute;n:&nbsp<input type="text"name="direccion"value=""maxlength"60"></label>

  

<br/>

  <label>Codigo Postal:&nbsp<input type="text"name="codigo postal"value=""maxlength="5"pattern="[0,9]{5} placeholder="00000"></label>

 

<br/>

    <label>Localidad:&nbsp<input type="text"name="Localidad"value=""></label>

<br/></fieldset>

  

<fieldset><legend>Tipo de contrataci&oacuten</legend>

   <input type="radio"name="contrato"value"1" checked="checked">Nueva Contratacion&nbsp</input></td>

<td><input type="radio"name="contrato"value"2">Portabilidad&nbsp</input></td>

<td>

<input type="radio"name="contrato"value"3">Cambio de contrato</input>

    </td></br>

  Elija la compañia actual:

    <select name="origen" required="required">

   <option value="movistar">Movistar</option>

    <option value="orange">Orange</option>

    <option value="vodafone">Vodafone</option>

    <option value="yoigo">Yoigo</option>

    <option value="ninguna">No tengo ninguna compañia</option>

    </select>

    &nbsp;&nbsp;&nbsp

    En caso de portabilidad, elija una nueva compañia:

<select name="origen" required="required">

   <option value="movistar">Movistar</option>

    <option value="orange">Orange</option>

    <option value="vodafone">Vodafone</option>

    <option value="yoigo">Yoigo</option>

 

    </select>

    </fieldset>

<fieldset>

<legend>Datos Bancario </legend>

 

  <label> Pais&nbsp:<input type="text" name="pais"value="ES"readonly="readonly"></label> (solos v&aacute;lido ES)

  <br/>

<label>Control IBAN: &nbsp<input type="text"name="iban" pattern="[0,9]{2}" maxlength="2" placeholder="XX"></label>(dos dígitos)

<br/>

  <label>Entidad<input type="text"name="enti" pattern"[0,9]{4}" placeholder="XXXX" maxlength="4"></label>(cuatro dígitos)

  

<br/>

  <label>Sucursal:&nbsp<input type="text"name="suc" pattern="[0,9]{4}"placeholder="XXXX"maxlength="4"></label>(cuatro dígitos)

 

<br/>

    <label>DC: &nbsp<input type="text"name="dc"placeholder="XX"pattern="[0,9]{2}" maxlength="2"></label>(dos dígitos)

<br>

 

    <label>Cuenta: &nbsp<input type="text"name="cuenta"placeholder="XXXXXXXXXX"pattern="[0,9]{10}" maxlength="10"/></label> (diez dígitos)

<br/></fieldset>

    </br>

 

    <fieldset>

    <legend>Datos estadísticos - ¿Cómo nos conoció?</legend>

  <input type="checkbox">A través de la TV</input>

    </br>

    <input type="checkbox">A través de la radio</input></br>

<input type="checkbox"> A través de  internet</input>

   </br>

    <input type="checkbox">Otros</input>

    </br>

    <input type:"range"name="valor"min="0"max="4"/>Valoración [1-5]

    </br>

  Fecha de la encuesta:

    <input type="date" name="Fecha de la encuesta" list="2019-01-01"/> Valoración [1-5]

    </fieldset>

    </br>

 <input type="submit"value="Enviar datos"/>

 <input type="submit"value="Borrar datos"/> 

  </br>

 </form>

    </br>

  <td><tr><button type="mostrar valoracion">Mostrar valoración</button></tr>

    <tr>

  <button type="Mostrar cuenta">Mostrar cuenta</button></tr></td>

 <button type="Mostrar dia semana">Mostrar dia semana</button></tr></td>

And I want to do these actions: function()
1-. When onclick “mostrar valoración” —> show an alert or message with this text : “ Has valorado con” + value of input type range + “puntos”.
2-. When onclick “mostrar cuenta”—> show a message with the text: “Le informamos que su cuenta bancaria es: “ + values of “cuenta”- “suc”-“dc” etc (fieldset cuenta bancaria).
3- when onclick “mostrar Semana” —> show a message with : “el día de la semana es”+ day of week input tupe date.

Thanks.

image
image3024×4032 2.41 MB

2

Firstly, welcome back to the forums.

While we are primarily here to help people with their Free Code Camp progress, we are open to people on other paths, too. Some of what you are asking is pretty trivial in the Free Code Camp context, so you might find that if you’re not getting the instruction and material you need in your current studies, the FCC curriculum will really help you get started. At a modest guess I’d say investing a 4-5 hours working through the curriculum here will really pay off. You can find the curriculum at https://learn.freecodecamp.org.

With your current questions, we don’t have enough context to know what you already know or don’t know, so it is impossible to guide you without just telling you the answer (which we won’t do).

It is pretty typical on here for people to share a codepen / jsfiddle example of what they have tried so that anyone helping has more of an idea of what help is actually helpful.

Please provide some example of what you’ve tried and I’m sure you’ll get more help.

Happy coding :slight_smile:

3

Hi¡ I have not idea about javascript. Well, a did Basics exercise, but I have never known how to use it.
Now I am learning HTML5 and CSS and a few Java. I have to do an exercise where, when I click on:

<button type=“submit” >Mostrar valoración</button>
<button type=“submit”>Mostrar cuenta</button>
<button type=“submit”>Mostrar dia semana</button>

These button have to show me a message with information about what value I have chosen between:
\’<input type:"range"name=“valor” id=“valoracion” min="0"max=“4”/>Valoración [1-4]\

If I click on “Mostrar día de la semana”, in this code: <input type=“date” name=“Fecha de la encuesta” id=“fecha” value=“2019-01-01”/> . It has to show me a message with day of week is the date I have chosen.

4

Maybe this will help get you unstuck: https://guide.freecodecamp.org/javascript/onclick-event/

5

Hi¡ It has been very useful your link.
I did this code, and the message appears. Perfect. But now, I want to get the value of input type =“range”. If I chose value “2”, I
want to print this alert (“Has valorado con 2 puntos”).
Why var x=document.getElementById(“valor”); doesn´t work?
’
<html>
<head>
<title>Print message java</style>
<script type=“text/javascript”>
function valoracion(){
var x=document.getElementById(“valor”);
alert(“Has valorado con X puntos”);
}
</script>
</head>
<body>
<input type="range"name="valoracion"id=“valor” value="0"min="0"max=“4”/>Valoración [1-4]

<button type="button"onclick=“valoracion();”>Mostrar valoración
</body>
</html>’

6

Here’s a simple demo to show you something similar:

https://codepen.io/Malgalin/pen/dybJzpz?editors=1010

There are two things you need to be aware of:

  1. Remember to get the value from the getElementById() function.
  2. You need to build the string you want to print so that it includes your variable.

e.g.

Incorrect:

var x = 3;
alert("Has valorado con x puntos")

Will show an alert saying "Has valorado con x puntos"

Correct

var x = 3;
alert("Has valorado con" + x + "puntos");

Will show an alert saying "Has valorado con 3 puntos"

I hope this helps :slight_smile: