Below is the code I have written. Every button I press takes me to a new window where another there is another button that is to be pushed by the user. When that button is pushed, an alphabet is printed out. Every alphabet opens to a new page. This setting is not very user friendly and I am trying to get the output on the same window.
Here is the code I have written for the main page:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Alphabets</title>
<script>
function alphabet(alpha){
switch(alpha){
case 1:
window.open("alphabetI.html");
break;
case 2:
window.open("alphabetSS.html");
break;
case 3:
window.open("alphabetH.html");
break;
case 4:
window.open("alphabetA.html");
break;
}
}
</script>
</head>
<body>
<h2>I'm Isha</h2>
<h3> Press either of these buttons to see the output</h3>
<button onclick = "alphabet(1)" >Button-1</button>
<button onclick = "alphabet(2)" >Button-2</button>
<button onclick = "alphabet(3)" >Button-3</button>
<button onclick = "alphabet(4)" >Button-4</button>
</body>
</html>
Here is the code I have written for Alphabet I which is written on "alphabetI.html":
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Alphabet:I</title>
<script>
function here(){
var a;
while(a != 14){
for(a = 0 ; a < 4 ; a ){
document.write("* ");
}
document.write("<br>");
for( a = 4; a < 10 ; a ) {
document.write(" * ");
document.write("<br>");
}
for( a = 10 ; a < 14 ; a ) {
document.write("* ");
}
}
}
</script>
</head>
<body>
<h2><u>I</u>SHA</h2>
<button onclick = "here()" >Alphabet I</button>
</body>
</html>
Codes for other alphabets are similar and include for loops.
I tried using window.alert() as it opens the alert box on the same page thus making it convenient, but that does not give me the desired output when placed in a for loop. For instance, if my loop runs 3 times, it will give me the alert message 3 times rather than printing the asterisks three times in one alert message. Then I tried console.log, but I realized that it prints a message to the web console, so it would not be of any use. I also tried using document.getElementbyId(); but again, that would not work in a for loop as the id of the place I am printing it to is just being replaced by my new value, thus, it would not print more than one element or value from a for loop. I finally used document.write() which works in every way but when a button is clicked, the output is printed on the same page and replaces the other buttons. That way, the user can neither press another button because the buttons are replaced by the generated alphabet, nor can the user go back. Eventually I created more html files and pasted my code to create the letters using for loops there, then I used window.open() to open a new window displaying the code. However, this is not very user friendly, and I would like for output to be displayed on the same page, underneath the buttons.
CodePudding user response：
You can create a div on the screen and give it an ID. Then refer to that Div and add content via innerHTML. In your buttons onclick, you can refer to each function too, no need for a switch.
This is a quick example. The key to reusing an element is adding content for example using = instead of replacing it with =
const output = document.querySelector("#output")
function alpha1() {
output.innerHTML = "";
var a;
while (a != 14) {
for (a = 0; a < 4; a ) {
output.innerHTML = "* ";
}
output.innerHTML = "<br>";
for (a = 4; a < 10; a ) {
output.innerHTML = " * ";
output.innerHTML = "<br>";
}
for (a = 10; a < 14; a ) {
output.innerHTML = "* ";
}
}
}
function alpha2() {output.innerHTML = "2";}
function alpha3() {output.innerHTML = "3";}
function alpha4() {output.innerHTML = "4";}<h2>I'm Isha</h2>
<h3> Press either of these buttons to see the output</h3>
<button onclick="alpha1()">Button-1</button>
<button onclick="alpha2()">Button-2</button>
<button onclick="alpha3()">Button-3</button>
<button onclick="alpha4()">Button-4</button>
<div id="output"></div>CodePudding user response：
use JQuery to make the process easy add JQuery CDN in the head section
<script
src="https://code.jquery.com/jquery-3.6.3.min.js"
integrity="sha256-pvPw upLPUjgMXY0G 8O0xUf /Im1MZjXxxgOcBQBXU="
crossorigin="anonymous"></script>
create a div with id="container" then use load() function of Jquery
function alphabet(alpha) {
switch (alpha) {
case 1:
$("#container").load("alphabetI.html");
break;
like this
here is the complete code
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta name="viewport" content="width=device-width">
<meta charset="utf-8">
<title>Alphabets</title>
<script
src="https://code.jquery.com/jquery-3.6.3.min.js"
integrity="sha256-pvPw upLPUjgMXY0G 8O0xUf /Im1MZjXxxgOcBQBXU="
crossorigin="anonymous"></script>
</head>
<body>
<h2>I'm Isha</h2>
<h3> Press either of these buttons to see the output</h3>
<button onclick="alphabet(1)">Button-1</button>
<button onclick="alphabet(2)">Button-2</button>
<button onclick="alphabet(3)">Button-3</button>
<button onclick="alphabet(4)">Button-4</button>
<div id="container"></div>
<script>
function alphabet(alpha) {
switch (alpha) {
case 1:
$("#container").load("alphabetI.html");
break;
case 2:
window.open("alphabetSS.html");
break;
case 3:
window.open("alphabetH.html");
break;
case 4:
window.open("alphabetA.html");
break;
}
}
</script>
</body>
</html>
i hope it will help you !!..