HTML Coding

<I cant find out what is wrong with my code, can someone help me?>

<Below this line, add a link to the EXACT exercise that you are stuck at.>

<Below this line, in what way does your code behave incorrectly? Include ALL error messages.>
It will have the button but not the equations that are supposed to pop up.



<html>
<head>

<h2>My First Education tool</h2>

<button type="Button" onclick="showQ()">Easy Level</button>

<button type="Button" 
onclick="document.getElementbyId('demo').innerHTML = Date()">Intermediate Level</button>

<button type="Button" 
onclick="document.getElementbyId('demo').innerHTML = Date()">Advanced Level</button>

<input type="Text" value=0>

<p id="demo"></p>
<script>

function showQ(){
 
 document.getElementbyId("demo").innerHTML ="";
  for(var i=0; i<5; i++){

    var v1 = Math.floor(Math.random()*11);

    var v2 = Math.floor(Math.random()*11);
  
  document.getElementbyId("demo").innerHTML += v1 + " + " + v2 + " = <input type='text'></input<br>";
}

There is a typo, use β€˜B’ instead of β€˜b’: getElementById instead of getElementbyId. It can be easily spotted debugging with Developper Tools

You must use camelCase. In ElementbyId (and possibly other things too), you must capitalize the letter that starts each β€˜word’.

Suggest make it a requirement that your script is unobtrusive. ES has matured to the point that we can completely remove it from the document, save for the SCRIPT element that loads the file. (This is not new, but the tools have matured.)

Your document structure is missing several key elements. Structure according to the standard HTML model:

index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>My First Education tool</title>
    <link href="index.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <h1>My First Education tool</h1>
    <div>
      <button>Easy Level</button>
      <button>Intermediate Level</button>
      <button>Advanced Level</button>
      <input type="text" value="0">
      <p id="demo"></p>
    </div>    
    <script src="index.js"></script>
  </body>
</html>

Take an inventory of your page elements. There are five interactive objects that we can cache in our script.

index.js
const buttons = document.querySelectorAll('button');
const userVal = document.querySelector('input');
const output = document.querySelector('#demo');

The first of these objects is a node list with three elements. The object is buttons and the individual elements are buttons[0], ...[1] and ...[2].

 > buttons[0].textContent
=> 'Easy Level'

Notice how unobstructed the HTML document is? This is what is meant by unobtrusive presentation and behaviors. Note also that <button> does not require a type attribute since it is already defined in the DOM as a button. We only use a type attribute if the object is an input control.element. type attribute values are never capitalized. type="text".

Buttons have as an advantage that they have a text node that we can read and manipulate. They also group very nicely, as our buttons object demonstrates.

Give the HTML some consideration before pushing forward. Suggest read up on HTML so the structure makes sense. We should picture it as an outline and have our document fit that model.

We can pick this up when you get back from your reading.

1 Like