Menu
Community /Pin to ProfileBookmark
@daveyerwinDec 07.2021 — #
Can’t get JavaScript output to display
The code below is for a page where a user types in three bowling scores and then clicks a button to display the average. I’ve done a very similar project in the past and used it to refamiliarize myself with JavaScript, as I haven’t been using it much lately. But anyway, here’s the code I typed up so far.
“`
<html>
<head>
<title></title>
<style type=”text/css”>
body {
background-color: lightblue;
color: blue;
font-family: arial;
text-align: center;
font-weight: bold;
}
#contentwrap {
border: 8px #FF0000 solid;
background-color: lightyellow;
border-radius: 20px;
padding: 15px;
width: 700px;
margin: 20px auto 0px auto;
}
#title {
font-size: 2.0em;
border-bottom: 8px #FF0000 double;
padding: 10px 0px 10px 0px;
}
#formdiv {
height: 400px;
padding-top: 10px;
}
.enterscore {
font-size: 1.5em;
margin-top: 20px;
}
#results {
font-size: 1.5em;
color: green;
}
</style>
<script src=”https://code.jquery.com/jquery-3.4.1.min.js” integrity=”sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=” crossorigin=”anonymous”></script>
<script src=”https://code.jquery.com/ui/1.12.1/jquery-ui.min.js” integrity=”sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=” crossorigin=”anonymous”></script>
<script type=”text/javascript”>
$(document).ready(function(){
$(“#scorebutton”).on(“click”, function(){
var name = parseFloat( $(“#name”).val() );
var score1 = parseInt( $(“#score1”).val() );
var score2 = parseInt( $(“#score2”).val() );
var score3 = parseInt( $(“#score3”).val() );
var average = calcAvg(score1, score2, score3);
var msg = “<div>Bowler’s name is ” + name + “</div>”;
msg += “<div>Bowling average is ” + average + “</div>”;”
$(“#output”).html(msg);
});
});
</script>
</head>
<body>
<div id=”contentwrap”>
<div id=”title”>
Bowling Average Calculator
</div>
<div id=”formdiv”>
<form>
<div class=”enterscore”>Enter name of bowler</div>
<input type=”text” id=”bowlname” size=”20″ />
<div class=”enterscore”>Enter score 1</div>
<input type=”text” size=”20″ />
<div class=”enterscore”>Enter score 2</div>
<input type=”text” size=”20″ />
<div class=”enterscore”>Enter score 3</div>
<input type=”text” size=”20″ />
<div style=”margin-top: 10px;”>
<input type=”button” style=”border-radius: 8px;”
id=”scorebutton” value=”Calculate Average” onClick=”getAverage()”/>
</div>
</form>
<div id=”output” style = “margin-top:25px;”></div>
</div> <!– this closes contentwrap–>
</body>
</html>
Sign in
to post a comment4 Comments(s) ↴
0
@daveyerwinDec 07.2021 — #>@JIMBOYKELLY#1640245 I've done a very similar project in the past and used it to refamiliarize myself with JavaScript, as I haven't been using it much lately.
``<i>
</i><html>
<head>
<title></title>
<style type="text/css">
body {
background-color: lightblue;
color: blue;
font-family: arial;
text-align: center;
font-weight: bold;
}
#contentwrap {
border: 8px #FF0000 solid;
background-color: lightyellow;
border-radius: 20px;
padding: 15px;
width: 700px;
margin: 20px auto 0px auto;
}
#title {
font-size: 2.0em;
border-bottom: 8px #FF0000 double;
padding: 10px 0px 10px 0px;
}
#formdiv {
height: 400px;
padding-top: 10px;
}
.enterscore {
font-size: 1.5em;
margin-top: 20px;
}
#results {
font-size: 1.5em;
color: green;
}
</style>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#scorebutton").on("click", function(){
var name = $("#name").val();
var ins=document.forms[0].elements;
var score1 = parseInt( $(ins[1]).val() );
var score2 = parseInt( $(ins[2]).val() );
var score3 = parseInt( $(ins[3]).val() );
var average = (score1 + score2 + score3)/3;
var msg = "<div>Bowler's name is " + name + "</div>";
msg += "<div>Bowling average is " + average + "</div>";
$("#output").html(msg);
});
});
</script>
</head>
<body>
<div id="contentwrap">
<div id="title">
Bowling Average Calculator
</div>
<div id="formdiv">
<form>
<div class="enterscore">Enter name of bowler</div>
<input type="text" id="name" size="20" />
<div class="enterscore">Enter score 1</div>
<input type="text" size="20" />
<div class="enterscore">Enter score 2</div>
<input type="text" size="20" />
<div class="enterscore">Enter score 3</div>
<input type="text" size="20" />
<div style="margin-top: 10px;">
<input type="button" style="border-radius: 8px;"
id="scorebutton" value="Calculate Average" />
</div>
</form>
<div id="output" style = "margin-top:25px;"></div>
</div> <!-- this closes contentwrap-->
</body>
</html>
```