I have made an HTML document that requests 4 piece of data: asks user for board

ID: 3680756 • Letter: I

Question

I have made an HTML document that requests 4 piece of data: asks user for board color, an integer, word(all alphabetic), and a character. My question is how could I display an output inside a body from my javascript coding.

Here is my code:

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="utf-8">
<title>Number and Phrase Evaluator</title>
<style type="text/css">

#boxResult{
display: none;
width: auto;
padding: 15px;
border: 10px solid black;
background-color: #D3D3D3;
float: left;
}

</style>

</head>
<body>
<h1>Number and Phrase Evaluator</h1>
<h1 id="dateHeader">Date</h1>
<div id="boxResult">
<p>The word entered was <span class="wordEntered"></span></p>
<p>The length of <span class="wordEntered"></span> is <span id="wordSize"></span> characters.</p>
<p>The word <span class="wordEntered"></span> has <span id="numVowels"></span> vowels in it.</p>
<div id="vowelPositions">

</div>

<p id="letterResult"></p>
</div>
<script type="text/javascript">

function usecurrentsDate(){
var weekDays = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
var months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
var current = new Date();

var ww = weekDays[current.getDay()];

var dd = current.getDate();

var mm = months[current.getMonth()];
var yyyy = current.getFullYear();

current = ww+' '+mm+' '+ dd +', ' +yyyy;
dateHeader.innerHTML = current;
}


function isNum(word){

var num = /^[0-9]+$/;

if(word.match(num)){
return true;
}
else
{
return false;

}
}


function isAlphaNum(word){

var regex = /^[a-z]+$/i;

if(word.search(regex) == -1){
return false;
}else{
return true
}
}

function countVowels(word){
var stTester = "aeiou";
var numVowels = 0;
for (var i = 0 ; i < word.length ; i++){
if(stTester.indexOf(word[i]) > -1){
numVowels++;
}
}
return numVowels;
}

var dateHeader = document.getElementById("dateHeader");
var boxResult =document.getElementById("boxResult");
var wordEntered = document.getElementsByClassName("wordEntered");
var wordSize = document.getElementById("wordSize");
var numVowels = document.getElementById("numVowels");
var numVowels = document.getElementById("numVowels");
var vowelPositions = document.getElementById("vowelPositions");


usecurrentsDate();

for(var i = wordAlphaNum.length ; i > 0 ; i--){
if(wordAlphaNum[i] == letter){

letterString += "<div>The word " + wordAlphaNum + " contains the letter "+ letter + " at position " + (i+1) + ".</div>";
break;
}
}

letterString += "</br><div>The no:of 3 in " + wordNum + " is "+ count3 + ".</div>";

for(var i = 0 ; i < wordEntered.length ; i++){

wordEntered[i].innerHTML = wordAlphaNum;
}

wordSize.innerHTML = wordAlphaNum.length;
numVowels.innerHTML = countVowels(wordAlphaNum);
vowelPositions.innerHTML = letterString;



boxResult.style.display = "block";
</script>
</body>
</html>

The final result appear in the board , and it starts with this line of code"The word entered was <span class="wordEntered"></span></p>". How could I add something above it. I want the final result inside the board to display the integer you have entered, then display how many 3's in that integer, which is this line of code "letterString += "</br><div>The no:of 3 in " + wordNum + " is "+ count3 + ".</div>";"

Explanation / Answer

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="utf-8">
<title>Number and Phrase Evaluator</title>
<style type="text/css">

#boxResult{
display: none;
width: auto;
padding: 15px;
border: 10px solid black;
background-color: #D3D3D3;
float: left;
}

</style>
</head>
<body>
<h1>Number and Phrase Evaluator</h1>
<h1 id="dateHeader">Date</h1>
<div id="boxResult">

<p>The word entered was <span class="wordEntered"></span></p>
<p>The length of <span class="wordEntered"></span> is <span id="wordSize"></span> characters.</p>
<p>The word <span class="wordEntered"></span> has <span id="numVowels"></span> vowels in it.</p>
<div id="vowelPositions">

</div>

<p id="letterResult"></p>
</div>
<script type="text/javascript">

function usecurrentsDate(){
var weekDays = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
var months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
var current = new Date();

var ww = weekDays[current.getDay()];

var dd = current.getDate();

var mm = months[current.getMonth()];
var yyyy = current.getFullYear();

current = ww+' '+mm+' '+ dd +', ' +yyyy;
dateHeader.innerHTML = current;
}

function isNum(word){

var num = /^[0-9]+$/;

if(word.match(num)){
return true;
}
else
{
return false;

}
}

function isAlphaNum(word){

var regex = /^[a-z]+$/i;

if(word.search(regex) == -1){
return false;
}else{
return true
}
}

function countVowels(word){
var stTester = "aeiou";
var numVowels = 0;
for (var i = 0 ; i < word.length ; i++){
if(stTester.indexOf(word[i]) > -1){
numVowels++;
}
}
return numVowels;
}

var dateHeader = document.getElementById("dateHeader");
var boxResult =document.getElementById("boxResult");
var wordEntered = document.getElementsByClassName("wordEntered");
var wordSize = document.getElementById("wordSize");
var numVowels = document.getElementById("numVowels");
var numVowels = document.getElementById("numVowels");
var vowelPositions = document.getElementById("vowelPositions");

usecurrentsDate();

var borderColor = prompt("Please enter the border color you want for your output box: yellow, purple, or orange only");

if( borderColor == "yellow" || borderColor == "purple" || borderColor == "orange"){
boxResult.style.borderColor = borderColor;
}else{
alert("Invalid color! " + borderColor + " border will be set to black");
}

var wordNum = prompt("Enter an integer in the text field");

while(isNaN(wordNum)){
alert("You entered a non-integer value please re-load and try again!!");
wordNum = prompt("Enter an integer in the text field");
}

       var count3=0;
for(var i = 0 ; i < wordNum.length ; i++){
if(wordNum[i] == '3'){
               count3++;
           }
}

var wordAlphaNum = prompt("Enter a word in the text field, all alphabetic characters");

while(!isAlphaNum(wordAlphaNum)){
alert("You entered an invalid word(" + wordAlphaNum + ")please re-load and try again!!");
wordAlphaNum = prompt("Enter a word in the text field, all alphabetic characters.");
}
var letter = prompt("Enter a letter in the text field bellow");
var letterString = "";
for(var i = wordAlphaNum.length ; i > 0 ; i--){
if(wordAlphaNum[i] == letter){

letterString += "<div>The word " + wordAlphaNum + " contains the letter "+ letter + " at position " + (i+1) + ".</div>";
               break;
}
}
letterString += "</br><div>The Number entered was " + wordNum +".</div>";
letterString += "</br><div>The no:of 3 in " + wordNum + " is "+ count3 + ".</div>";

for(var i = 0 ; i < wordEntered.length ; i++){

wordEntered[i].innerHTML = wordAlphaNum;
}
wordSize.innerHTML = wordAlphaNum.length;
numVowels.innerHTML = countVowels(wordAlphaNum);
vowelPositions.innerHTML = letterString;

boxResult.style.display = "block";
</script>
</body>
</html>

Navigate

I have made all the fucntions and the classes but I am having trouble creating t

I have made and trained a simple neural network which now seems to produce outpu

Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.

I have made an HTML document that requests 4 piece of data: asks user for board

Question

Explanation / Answer

Related Questions

Navigate