I'm trying to create a quiz for an online bootcamp. I'm trying to make it so that when the user clicks a true or false radio button and then clicks the "next" button, the score is updated and the next question is displayed. I'm trying to use line 30-32 of the Javascript to do this, but am not quite sure how to implement it. It is currently preventing my app from running when it is not commented out.
Here's my HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="quiz.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="quiz.js"></script>
<title>Pokemon Quiz</title>
</head>
<body>
<h1>Pokemon Quiz! Test your skill!</h1>
<button id="reset" type="button">Reset Quiz</button>
<form>
<h3 class="anchor"></h3><br>
<input type="radio" name="T/F" id="true">True<br>
<input type="radio" name="T/F" id="false">False
<br><button type="button" id="next">Next/Start</button><br>
</form>
<p>Score: <span id="score">0</span></p>
<p>Question No. <span id="questionnum">0</span></p>
</body>
</html>
CSS:
body {
color: #00CCFF;
background-image: url(http://i.ytimg.com/vi/vyY0jRjrTy4/maxresdefault.jpg);
margin-left: 500px;
margin-top: 300px;
}
form {
margin-left: 45px;
}
input {
color: red;
margin-left: 100px;
}
P {
color: yellow;
margin-left: 150px;
}
#next {
margin-left: 100px;
color: red;
}
#reset {
margin-left: 135px;
color: red;
}
Javascript:
$( document ).ready(function() {
//game();
questionNumber = 0;
score = 0;
if (questionNumber < questions.length) {
$('#next').click(function(){
game();
questionNumber ++;
});
};
$('#reset').click(function(){
neu();
game();
});
});
function neu() {
questionNumber = 0;
score = 0;
}
function game() {
console.log(questionNumber);
$("h3.anchor").html(questions[questionNumber]);
//if radiobutton value == answers[questionNumber]
if ((document.getElementById("true").checked && answers[questionNumber] == true) || (document.getElementById("false").checked && answers[questionNumber] == false) {
score ++;
}
/*
if(document.getElementById("next").clicked == true) {
if(document.getElementById("true").checked) {
score++;
console.log(score);
}
console.log(score);
$(".anchor").html("There are 9 certified Pokemon League badges?");
}
*/
}
//Use use question number to access array values (questions)
//consider using object instead of array to allow for boolean values
//var questions = [];
questions = ["Caterpie evolves into Metapod?",
"There are 9 certified Pokemon League badges?",
"Poliwag evolves 3 times?",
"Are thunder moves effective against ground-type Pokemon?",
"Pokemon of the same kind and level are not identical?",
"TM28 contains Tombstony?"];
answers = [true, false, false, false, true, false];
Related
This question already has answers here:
Compare two last character in a string
(2 answers)
Closed 4 years ago.
I'm trying to create a simple add calculator. As of now I am successful on displaying the numbers and concatenating them. But I what I don't want is when I clicked the plus(add) button two or more times, it will also concatenate with another plus symbol. Is there a way for me that if ever I clicked the plus button twice. the second symbol will no longer display. Like if it detects that the previous input is a plus symbol. it will never concatenate with each other. Sorry if my English is not clear.
Sample Error when i clicked the add button multiple times: ( 111++++222 ) instead of just 111+222
Here's my code guys:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body {
margin: 0px auto;
width: 600px;
}
p {
font-size: 23px;
float: left;
padding: 30px;
border: solid #336336 2px;
margin: 20px;
}
</style>
</head>
<body>
<h1 id="result">aaww </h1>
<p id="1" class="one">1</p>
<p id="2" class="two">2</p>
</br></br>
<p id="add">+</p>
</br></br>
<p id="equals">=</p>
<!-- <p class="cancel">cancel</p> <p class="cancel">cancel</p> -->
<p class="clear-tasks"> CLEAR</p>
<script>
//PLACE HOLDER FOR THE RESULT
let Result = document.getElementById("result");
Result.innerText = "RESULT HERE";
// CLEAR BUTTON
let clear = document.querySelector('.clear-tasks');
// EVENT LISTENER TO CLEAR THE BUTTON
clear.addEventListener('click', function(){
Result.textContent = '';
});
let addition = document.querySelector("#add");
addition.addEventListener('click',runEventAdd);
function runEventAdd(e){
Result.textContent += ' + ';
}
//ONE BUTTON
const numberOne = document.querySelector('.one');
// EVENT LISTENER TO CONCATINATE 1
numberOne.addEventListener('click', runEvent);
function runEvent(e) {
if (Result.textContent === 'RESULT HERE') {
Result.textContent = 1;
} else {Result.textContent += 1;
}
}
//TWO BUTTON
const numberTwo = document.querySelector('.two');
// EVENT LISTENER TO CONCATINATE 2
numberTwo.addEventListener('click', runEvent2);
function runEvent2(e) {
if (Result.textContent === 'RESULT HERE') {
Result.textContent = 2;
} else {Result.textContent += 2;
}
}
</script>
</body>
</html>
Just use endsWith to check if the current string ends with a +:
addition.addEventListener('click',runEventAdd);
function runEventAdd(e){
if (!Result.textContent.endsWith(' + '))
Result.textContent += ' + ';
}
Use an if statement to check if there is already an operator. I made something similar in Java with GUI instead of JS but thats what I did and it worked fine. If you do the if statement you could use if(str.indexOf(operator) == -1) {
do the concatenation.
Check the last value of your result. If it is a '+', don't add another '+'
//PLACE HOLDER FOR THE RESULT
let Result = document.getElementById("result");
Result.innerText = "RESULT HERE";
// CLEAR BUTTON
let clear = document.querySelector('.clear-tasks');
// EVENT LISTENER TO CLEAR THE BUTTON
clear.addEventListener('click', function(){
Result.textContent = '';
});
let addition = document.querySelector("#add");
addition.addEventListener('click',runEventAdd);
function runEventAdd(e){
if(Result.innerText.slice(-1) != '+')
{
Result.textContent += ' + ';
}
}
//ONE BUTTON
const numberOne = document.querySelector('.one');
// EVENT LISTENER TO CONCATINATE 1
numberOne.addEventListener('click', runEvent);
function runEvent(e) {
if (Result.textContent === 'RESULT HERE') {
Result.textContent = 1;
} else {Result.textContent += 1;
}
}
//TWO BUTTON
const numberTwo = document.querySelector('.two');
// EVENT LISTENER TO CONCATINATE 2
numberTwo.addEventListener('click', runEvent2);
function runEvent2(e) {
if (Result.textContent === 'RESULT HERE') {
Result.textContent = 2;
} else {Result.textContent += 2;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body {
margin: 0px auto;
width: 600px;
}
p {
font-size: 23px;
float: left;
padding: 30px;
border: solid #336336 2px;
margin: 20px;
}
</style>
</head>
<body>
<h1 id="result">aaww </h1>
<p id="1" class="one">1</p>
<p id="2" class="two">2</p>
</br></br>
<p id="add">+</p>
</br></br>
<p id="equals">=</p>
<!-- <p class="cancel">cancel</p> <p class="cancel">cancel</p> -->
<p class="clear-tasks"> CLEAR</p>
</body>
</html>
How do I store input values from one input field to an array. And if I input numbers, then how can I get a sum of those numbers? Here's my codes.
I really appreciate some help from you guys.
My css
<style>
.item-check {
display: inline-block;
position: absolute;
width: 22px;
height: 21px;
cursor: pointer;
background-image: url('https://cdn.glitch.com/72548e86-2a07-45d1-9756-a034ea6672b3%2Fincomplete.png?1495684448133');
}
.complete {
background-image: url('https://cdn.glitch.com/72548e86-2a07-45d1-9756-a034ea6672b3%2Fcomplete.png?1495684439106');
}
.item-text {
margin-left: 2em;
width: 22px;
height: 21px;
}
.item-remove {
float: right;
cursor: pointer;
width:20px;
height:20px;
background-size:cover;
background-image: url('https://cdn.glitch.com/72548e86-2a07-45d1-9756-`a034ea6672b3%2Fremove.png?1495684443965');`
}
</style>
My HTML
<html>
<head>
<meta charset="UTF-8">
<title>My To-do List</title>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link rel="stylesheet" href="/style.css" type="text/css">
</head>
<body>
<div class="container">
<header>
<h1>My To-do List</h1>
</header>
<!-- Key Section of App -->
<form class="list-content">
<label>
<input type="text" class="item-input">
</label>
<h4 id="message"></h4>
<ul class="shopping-list">
<!-- <li>Sample Item</li> -->
</ul>
<button class="add-item">Add Item</button>
</form>
<!-- Key Section of App -->
</div>
</body>
</html>
My Javascript code
// Step 1
// This code is executed when someone clicks the "Add Item" button
// at the top right of the shopping-item
// -------------------
<script>
$(function() {
$(".add-item").on('click', function(event) {
if ($('.item-input').val() == "") {
alert ('Please enter some text!');
return false;
} else {
var listItem = $(".item-input").val();
var itemHtml = "<li><span class='item-check'></span><span class='item-text'>" + listItem + "</span><span class='item-remove'></span></li>";
$(".shopping-list").append(itemHtml);
//Remove the text the user entered from item-input
$('.item-input').val();
$('.item-input').val('');
//Count items entered
var addedItem = $('.item-text').length;
document.getElementById("message").innerHTML=("You have entered " + addedItem + " items in your list");
event.preventDefault();
};
});
// -------------------
// This code is executed when someone clicks the "X" button
$(".shopping-list").on('click', '.item-remove', function(event) {
$(event.currentTarget).parent().remove();
});
// -------------------
// This code is executed when someone clicks the checkbox in the shopping-item section
$(".shopping-list").on('click', '.item-check', function(event) {
$(event.currentTarget).toggleClass('complete');
});
});
</script>
Hey guys i was wondering if someone could help with some issues on my code.
Basically ive created 4 elements(divs) in an onclick event.From html i've also done so that same button dissapears
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="blackjack2.css">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="blackjack1.js"></script>
</head>
<body>
<button class= "boton" id="start">Play</button>
<button class= "boton" id="hit">Hit</button>
<button class= "boton" id= "stand">Stand</button>
<script type="text/javascript">
var jugar = document.getElementById('start')
var mas = document.getElementById('hit')
var mantener = document.getElementById('stand')
var cuerpo= document.getElementsByTagName('body')[0]
var crear_cartas= function() {
var card= document.createElement('div');
var texto =document.createTextNode("CASINO");
card.setAttribute("class","cartas");
card.appendChild(texto);
cuerpo.appendChild(card);
}
jugar.onclick= function(){
crear_cartas()
crear_cartas()
crear_cartas()
crear_cartas()
jugar.setAttribute('class','ocultar')
}
</script>
</body>
</html>
Up to there is ok , but im not sure if from jquery i can apply a filter that activates on the same onclick event that appears in javascript code (on those 4 created elements )to the even ones so that they make an animation lowering slightly the margin.
I've read about it but i am a bit at sea given that the filter would apply to created elements..
Thank you in advance guys
css class ".cartas" code included:
.cartas{
/*display: none;*/
margin: 260px 75px 0 75px;
display: inline-block;
border-radius: 10px;
border: 1px solid black;
padding-top: 50px;
height:100px;
width:100px;
color: #003366;
font-family: Muli,Helvetica Neue,Helvetica,sans-serif;
text-align: center;
background-color: #f0f8ff;
}
Add an onlcick event to all event divs. This event will add a class that will push the elements below those divs downward using a margin-bottom
Snippet below
var counter = 0;
var jugar = document.getElementById('start')
var mas = document.getElementById('hit')
var mantener = document.getElementById('stand')
var cuerpo = document.getElementsByTagName('body')[0]
var crear_cartas = function() {
card = document.createElement('div');
var texto = document.createTextNode("CASINO");
card.setAttribute("class", "cartas");
card.appendChild(texto);
cuerpo.appendChild(card);
}
jugar.onclick = function() {
for (var x = 0; x < 4; ++x) {
crear_cartas();
if ((x + 1) % 2 == 0) {
card.addEventListener('click', function() {
this.classList.add("move");
})
}
}
jugar.setAttribute('class', 'ocultar')
} //end func
div {
transition: margin-bottom 0.5s;
}
.move {
margin-bottom: 50px;
}
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="blackjack2.css">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="blackjack1.js"></script>
</head>
<body>
<button class="boton" id="start">Play</button>
<button class="boton" id="hit">Hit</button>
<button class="boton" id="stand">Stand</button>
</body>
</html>
I am learning javascript and trying to do this with pure javascript..
I have created an input which when user fill and click on "Add Input Text" it will wrap the text into li tags and also add close button on the each input and add the input content to the div under it, I am using following code..
I am unable to make the close button work which are on the right side of each list items...
Please help.. Thanks
var inputBox = document.getElementById('input-box');
var inputDisplay = document.getElementById('input-display');
function clickme(){
if(inputDisplay.value == ""){
alert("please put something in the input field.");
}else
inputBox.innerHTML += "<li>" + inputDisplay.value + 'x</li>';
}
function clearInput(){
inputBox.innerHTML = "";
}
function delLast(){
if( inputBox.innerHTML === "") {
alert("There is nothing to delete");
}else{
var lastInputText = inputBox.lastChild;
lastInputText.remove();
}
}
var closeThis = document.getElementById("closebtn");
closeThis.addEventListener('click' , function(){
this.parentNode.remove();
});
.container{min-height:400px;width:100%;background-color:#999;color:#fff;float:left}.input-container{padding:10px;background-color:#777;-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px}a#closebtn{background-color:#8B8B8B;float:right;padding:1px 3px;margin:0px;color:#fff;text-decoration:none}#input-box{list-style-type:none}#input-box li{color:#FFF;background-color:#404040;padding:5px;width:300px;margin:0px;float:left;clear:both;margin-bottom:10px;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>javascript-learning</title>
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<div class="container">
<div class="input-container">
<input type="text" id="input-display">
<button onclick = "clickme()">Add input text</button>
<button onclick= "clearInput()">clear Input Box</button>
<button onclick= "delLast()">Del Last</button>
</div> <!--input-container -->
<div id ="main-content-container">
<ul id= "input-box">
</ul>
</div> <!--input-box -->
<div class="array-div">
</div>
</div> <!-- container -->
<!-- javascripts -->
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/underscore/underscore.min.js"></script>
<script src="bower_components/backbone/backbone-min"></script>
<script src="assets/js/script.js"></script>
</body>
</html>
you need to add a onclick event on your x link and pass the element as parameter
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>javascript-learning</title>
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<div class="container">
<div class="input-container">
<input type="text" id="input-display">
<button onclick = "clickme()">Add input text</button>
<button onclick= "clearInput()">clear Input Box</button>
<button onclick= "delLast()">Del Last</button>
</div> <!--input-container -->
<div id ="main-content-container">
<ul id= "input-box">
</ul>
</div> <!--input-box -->
<div class="array-div">
</div>
</div> <!-- container -->
<!-- javascripts -->
<script>
var inputBox = document.getElementById('input-box');
var inputDisplay = document.getElementById('input-display');
function clickme(){
if(inputDisplay.value == ""){
alert("please put something in the input field.");
}else
inputBox.innerHTML += "<li>" + inputDisplay.value + 'x</li>';
}
function clearInput(){
inputBox.innerHTML = "";
}
function delLast(){
if( inputBox.innerHTML === "") {
alert("There is nothing to delete");
}else{
var lastInputText = inputBox.lastChild;
lastInputText.remove();
}
}
var closeThis = document.getElementById("closebtn");
closeThis.addEventListener('click' , function(){
this.parentNode.remove();
});
function close_click(elem)
{
elem.parentNode.remove();
}
</script>
</body>
</html>
i added close_click function in javascript that is being called in every of your created close button.
Change closebtn from an id to a class, because ids must be unique.
You can then replace the closebtn click handler with a delegated event on document.body:
document.body.addEventListener('click', function(event) {
if(event.target.className==='closebtn') {
event.target.parentNode.remove();
}
});
event.target will be the element that has been clicked.
Snippet
var inputBox = document.getElementById('input-box');
var inputDisplay = document.getElementById('input-display');
function clickme(){
if(inputDisplay.value == ""){
alert("please put something in the input field.");
}else
inputBox.innerHTML += "<li>" + inputDisplay.value + 'x</li>';
}
function clearInput(){
inputBox.innerHTML = "";
}
function delLast(){
if( inputBox.innerHTML === "") {
alert("There is nothing to delete");
}else{
var lastInputText = inputBox.lastChild;
lastInputText.remove();
}
}
document.body.addEventListener('click', function(event) {
if(event.target.className==='closebtn') {
event.target.parentNode.remove();
}
});
.container{min-height:400px;width:100%;background-color:#999;color:#fff;float:left}.input-container{padding:10px;background-color:#777;-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px}a.closebtn{background-color:#8B8B8B;float:right;padding:1px 3px;margin:0px;color:#fff;text-decoration:none}#input-box{list-style-type:none}#input-box li{color:#FFF;background-color:#404040;padding:5px;width:300px;margin:0px;float:left;clear:both;margin-bottom:10px;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>javascript-learning</title>
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<div class="container">
<div class="input-container">
<input type="text" id="input-display">
<button onclick = "clickme()">Add input text</button>
<button onclick= "clearInput()">clear Input Box</button>
<button onclick= "delLast()">Del Last</button>
</div> <!--input-container -->
<div id ="main-content-container">
<ul id= "input-box">
</ul>
</div> <!--input-box -->
<div class="array-div">
</div>
</div> <!-- container -->
<!-- javascripts -->
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/underscore/underscore.min.js"></script>
<script src="bower_components/backbone/backbone-min"></script>
<script src="assets/js/script.js"></script>
</body>
</html>
You need to add the click handler after creating the close button
var inputBox = document.getElementById('input-box');
var inputDisplay = document.getElementById('input-display');
function clickme() {
if (inputDisplay.value == "") {
alert("please put something in the input field.");
} else {
//create a new li
var li = document.createElement('li');
//add the input text to it as text
li.appendChild(document.createTextNode(inputDisplay.value));
//create a new anchor
var a = document.createElement('a');
a.href = "#";
//since id of an element must be unique, use classname
a.className = 'closebtn';
//add the click handler
a.addEventListener('click', closeHandler);
//add the anchor to li
li.appendChild(a);
//add the li to the ul
inputBox.appendChild(li);
}
}
function closeHandler() {
this.parentNode.remove();
}
function clearInput() {
inputBox.innerHTML = "";
}
function delLast() {
if (inputBox.innerHTML === "") {
alert("There is nothing to delete");
} else {
var lastInputText = inputBox.lastChild;
lastInputText.remove();
}
}
.container {
min-height: 400px;
width: 100%;
background-color: #999;
color: #fff;
float: left
}
.input-container {
padding: 10px;
background-color: #777;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px
}
a.closebtn {
background-color: #8B8B8B;
float: right;
padding: 1px 3px;
margin: 0px;
color: #fff;
text-decoration: none
}
#input-box {
list-style-type: none
}
#input-box li {
color: #FFF;
background-color: #404040;
padding: 5px;
width: 300px;
margin: 0px;
float: left;
clear: both;
margin-bottom: 10px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>javascript-learning</title>
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<div class="container">
<div class="input-container">
<input type="text" id="input-display">
<button onclick="clickme()">Add input text</button>
<button onclick="clearInput()">clear Input Box</button>
<button onclick="delLast()">Del Last</button>
</div>
<!--input-container -->
<div id="main-content-container">
<ul id="input-box">
</ul>
</div>
<!--input-box -->
<div class="array-div">
</div>
</div>
<!-- container -->
<!-- javascripts -->
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/underscore/underscore.min.js"></script>
<script src="bower_components/backbone/backbone-min"></script>
<script src="assets/js/script.js"></script>
</body>
</html>
The Goal:
A button which displays an alert with "Hello world!" and some radio buttons which display a warning when the third one is selected.
The HTML:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>hello world</title>
<link rel="stylesheet" href="style.css">
<meta name="description" content="">
</head>
<body>
<div id="main">
<p>text</p>
link
<button>button</button>
<form>
<fieldset>
<legend>Legend</legend>
<label for="radio1">Option 1</label>
<input type="radio" name="radio-buttons" value="option-1" id="radio1"/>
<label for="radio2">Option 2</label>
<input type="radio" name="radio-buttons" value="option-2" id="radio2"/>
<label for="radio3">Option 3</label>
<input type="radio" name="radio-buttons" value="option-3" id="radio3"/>
<p id="warn">No, pick another one.</p>
</fieldset>
</form>
</div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
The CSS:
Most of this really doesn't matter. The important thing is #warn which is supposed to only show when the third option is selected.
a,
button {
display: block;
margin-bottom: 1em;
}
fieldset {
width: 245px;
height: 75px;
background: #dfe;
position: relative;
}
legend {
background: white;
}
#warn {
display: none;
background: #d33;
color: #fff;
font-family: helvetica;
padding: 10px 15px 10px;
margin: 0 -12px;
position: absolute;
top: 52px;
width: 239px;
}
The JavaScript:
I think the problem is in my event handlers, but I don't know for sure. BTW yes I know there's some extraneous stuff here; like I said I'm just screwing around.
// variables
var p = document.getElementsByTagName("p");
var a = document.getElementsByTagName("a");
var button = document.getElementsByTagName("button");
var fieldset = document.getElementsByTagName("fieldset");
var radio1 = document.getElementById("radio1");
var radio2 = document.getElementById("radio2");
var radio3 = document.getElementById("radio3");
var warn = document.getElementById("warn");
// functions
function prepareEventHandlers() {
button.onclick = function() {
alert("Hello world!")
};
radio3.onfocus = function() {
warn.setAttribute("display","inherit")
}
}
// window onload
window.onload = function() {
prepareEventHandlers();
}
Notice the name of the function:
document.getElementsByTagName()
// ^ That's an "s", so the function
// returns an array of elements.
button.onclick won't work because button is an array of buttons (I would name it buttons), so you have to iterate:
for (var i = 0; i < button.length; i++) {
button[i].onclick = ...
}
Since you have only one button, I would just give it an id and use document.getElementById() to fetch the single button and attach the onclick handler.
First, go fo button like this,
var button = document.getElementsByTagName("button")[0];
getElementsByTagName returns the array of matched elements...
For radio button
Try this
display is a CSS property. Using display as an HTML attribute will not hide or show content. You have to access CSS properties using style attribute. like,
radio3.onclick = function() {
warn.style.display = "inherit";
}