Menu
I am trying to create a Linux terminal themed website which has multiple commands. The user has liberty to use whichever commands he/she wants just like a normal terminal. I've created a sample HTML file and included a simple function which displays a "cat" when the user displays a cat. However, I am having a problem creating multiple functions. I am not familiar with javascript and HTML that much, so it maybe a stupid question. My code is:
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://unpkg.com/jquery.terminal/js/jquery.terminal.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/jquery.terminal/css/jquery.terminal.min.css"/>
</head>
<body>
<script>
$('body').terminal({
cat: function() {
this.echo($('<img src="https://placekitten.com/408/287">'));
}
});
</script>
</body>
</html>
The output website looks something like this:
Now, If I add one more function. I get the error function_name not found. My sample code for multiple function is,
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://unpkg.com/jquery.terminal/js/jquery.terminal.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/jquery.terminal/css/jquery.terminal.min.css"/>
</head>
<body>
<script>
$('body').terminal({
cat: function() {
this.echo($('<img src="https://placekitten.com/408/287">'));
}
dog: function(v){
this.echo('hello ' + v);
}
});
</script>
</body>
</html>
So, I would like a terminal where I could interact with multiple commands (functions). Also, it would be great to be directed to other resources which could have helpful info on this topic. Thanks in advance. (also, I have referred to https://itnext.io/how-to-create-interactive-terminal-like-website-888bb0972288).
683
asked Jun 17 '26 18:06
You need to comma separate the functions.
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://unpkg.com/jquery.terminal/js/jquery.terminal.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/jquery.terminal/css/jquery.terminal.min.css"/>
</head>
<body>
<script>
$('body').terminal({
cat: function() {
this.echo($('<img src="https://placekitten.com/408/287">'));
},
dog: function(v){
this.echo('hello ' + v);
}
});
</script>
</body>
</html>
As you've added a v paramater in there, for it to work you have to type "dog 1" or "dog anything", else remove the v function/param and continue :)
To answer the part about resources and learning, just go learn the basic fundamentals of JavaScript/jQuery and the rest will make sense - while jumping in to the deep end right away is a way to learn, sometimes you gotta go back to basics and there are countless videos and articles that can teach you the basics, they're all just a simple Google away.
JavaScript/jQuery/HTML all follow a basic foundation and once you learn those then you can have a bit more fun with the advanced stuff. You're basically trying to build a roof of a house before you've built the walls to put it on.
179
answered Jun 20 '26 09:06
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With