I am a beginner in HTML and JS and tried making this button, which concats two strings into one when I click the button. please clarify where I am going wrong
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Arrays</h2>
<button id="MUL" onclick="aa1()">alpha</button>
<p id="demo"></p>
<script>
let cars = "7";
let a1 = "8";
function aa1() {
cars = cars.concat(a1)
}
document.getElementById("demo").innerHTML = cars;
</script>
</body>
</html>
Advertisement
Answer
All the other answers have correctly told you that you need any actions you want carried out when the event occurs to be included inside of the event callback function, but none of the answers have told you that you are setting up your event using an outdated legacy approach that should no longer be used.
Do not set up events using inline HTML event attributes, such as onclick. Instead, separate your JavaScript from your HTML and use the modern Document Object Model API for setting up events, which is .addEventListener().
In addition, don’t use .innerHTML if you can avoid it as it has security and performance implications. When you aren’t working with HTML strings, just use .textContent.
Lastly, the vast majority of code that is used on the web is code that new developers just copied from some other site that seems to work so they just copy/paste it into their pages and change what they think they need to. The problem with this is that outdated and non-standard code winds up still being used decades after it became obsolete. But, because the code “works”, no one questions it. It’s only until you become more knowledgeable about HTML, CSS, and JavaScript do you begin to realize how bad using these outdated codes really is. So, take the time to learn about web development and don’t rely on copy/paste from some other page.
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
</head>
<body>
<!-- Don't use an HTML heading because of how big it will
make the text. Headings create sections and sub-sections
of the page. You can't have an H2 if there is no H1 for
it to be a sub-section of. Use the right heading to denote
the right section level and use CSS to change the font display
if you need to. -->
<h1>JavaScript Arrays</h1>
<button id="MUL">alpha</button>
<p id="demo"></p>
<script>
let cars = "7";
let a1 = "8";
// Get your element reference just once, not
// every time the function runs
let demo = document.getElementById("demo");
// Set up your events in JavaScript using the modern standard
document.getElementById("MUL").addEventListener("click", aa1);
function aa1() {
// Avoid .innerHTML whenever you can.
// Since you aren't working with HTML content here
// textContent is the way to go.
// Also, since cars and a1 were declared as strings
// there's no need to call the concat() function. Using
// + between strings causes concatenation.
demo.textContent = cars + a1;
}
</script>
</body>
</html>