3.2 KiB
| id | title | challengeType | dashedName |
|---|---|---|---|
| 5ef9b03c81a63668521804de | Paso 47 | 0 | step-47 |
--description--
Puedes observar que ambos elementos radio button pueden ser seleccionados al mismo tiempo. Para hacer que al seleccionar un radio button, el otro sé deseleccione automáticamente, ambos botones deben tener un atributo name con el mismo valor.
Añade el atributo name con el valor indoor-outdoor a ambos radio button.
--hints--
Ambosradio button aún deben estar ubicados entre las etiquetas de apertura y cierre del elemento label.
const labelChildNodes = [...document.querySelectorAll('form > label')].map(
(node) => node.childNodes
);
assert(
labelChildNodes.filter((childNode) => childNode[0].nodeName === 'INPUT')
.length === 2
);
Ambos radio button deben tener un atributo name. Comprueba que hay un espacio después del nombre de la etiqueta de apertura y/o que hay espacios antes de todos los nombres de los atributos.
const radioButtons = [...document.querySelectorAll('input[type="radio"]')];
assert(radioButtons.every((btn) => btn.hasAttribute('name')));
Ambos radio button deben tener un atributo name con el valor indoor-outdoor. Probablemente no has añadido el valor o tienes un error tipográfico. Recuerda que los valores de los atributos deben estar entre comillas.
const radioButtons = [...$('input[type="radio"]')];
assert(
radioButtons.every((btn) =>
btn.getAttribute('name').match(/^indoor-outdoor$/)
)
);
--seed--
--seed-contents--
<html>
<body>
<h1>CatPhotoApp</h1>
<main>
<section>
<h2>Cat Photos</h2>
<!-- TODO: Add link to cat photos -->
<p>Click here to view more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a>.</p>
<a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
<section>
<h2>Cat Lists</h2>
<h3>Things cats love:</h3>
<ul>
<li>cat nip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
<figure>
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate.">
<figcaption>Cats <em>love</em> lasagna.</figcaption>
</figure>
<h3>Top 3 things cats hate:</h3>
<ol>
<li>flea treatment</li>
<li>thunder</li>
<li>other cats</li>
</ol>
<figure>
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" alt="Five cats looking around a field.">
<figcaption>Cats <strong>hate</strong> other cats.</figcaption>
</figure>
</section>
<section>
<h2>Cat Form</h2>
<form action="https://freecatphotoapp.com/submit-cat-photo">
--fcc-editable-region--
<label><input id="indoor" type="radio"> Indoor</label>
<label><input id="outdoor" type="radio"> Outdoor</label>
--fcc-editable-region--
<input type="text" name="catphotourl" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form>
</section>
</main>
</body>
</html>