I need help with JavaScript

Javascript Programming
#22

Thanks Carlos, it works to show the button. Now, I am trying next exercise to get user input text, however there is something wrong with my script, Could you have a look?

html>
<head>
  <title>Great website</title>
<script> src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>


          <input id="theinput" type= "text" />
<button id="the Button"> Show written text</button>

        <script>
$("#theButton").click(function(){

var textInputted = $("#theInput").val();
alert(textInputted);
});
      </script>

</body>
</html>
1 Like
#23

Hello @Mroman, your ID on <input> tag is: id="theinput", while in your variable textInputted you are pointing to the wrong id "#theInput". the misstype on the i and capital i.

Also your <button> tag had the same error, id="the Button", in your <script> tag you have your function with $("#theButton")....

If you have any more questions, please let us know so we can help you! :slight_smile:

Carlos Z.

#24

I am on Chapter 19, Dynamic list. I write the same than Ivan but the four fruits do not display. Also the search button do not appear add fruit. I do not know what I am doing wrong…

Blockquote

Great website 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

My favorite fruits

Add fruit 
    <script>

$("#addFruitButton").click(function(){
var fruitText = $("#fruitTextInput").val();
alert(fruitText);
});
var fruits = [“Apple”, “Orange”, “Banana”, “Pinapple” ];

var list = $("#fruitlist");

$.each(fruits,function(index,value)¨{

$("

  • ").text(value).appendTo(list);
    });

    console.log(fruits)

      </script>
    • #25

    Remember you can use the “Preformatted Text” Button to encapsulate any kind of code you want to show.

    
function formatText(){

let words = “I’m a preformatted Text box, Please use me wisely!”

}

    prefromatted_text-animated

    preformatted text
    preformatted text957×174 11.9 KB

    Carlos Z.

    1 Like
    #26 
    <html>

<head>
  <title>Great website</title>

     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>

<h1>My favorite fruits</h1>
<o1 id="fruitlist">
</o1>


  <input id="fruitTextInput" placeholder="Write fruit" type= "text" />
<button id="addFruitButton">Add fruit</button>

        <script>
$("#addFruitButton").click(function(){
  var fruitText = $("#fruitTextInput").val();
  alert(fruitText);
});
var fruits = ["Apple", "Orange", "Banana", "Pinapple" ];

var list = $("#fruitlist");

$.each(fruits,function(index,value)¨{

  $("<li/>").text(value).appendTo(list);
});

console.log(fruits)


      </script>

</body>
    #27

    Ok sir, you have some few errors in your code.

    Codeline 27: $.each(fruits,function(index,value)¨{... you have a miss-typed " in the function body. Must Delete it.

    Codeline 19: your click function that you use to get the inputed fruit from the <input> tag, you are just binding the value of the input to the variable fruitText, but you should also push it to the array fruits.

    Codeline 27: after adding a new fruit to the array, the list should be refreshed, you could use a function redrawList to do this for you. Take in consideration that you should clear the list before refreshing it.

    Your file is missing the </html> tag at the end.

    Hope you find this useful.
    If you have any more questions, please let us know so we can help you! :slight_smile:

    Carlos Z.

    1 Like
    #28 
    <html>
<head>
<title> This is a website </title>
</head>

<body>
<h1> This is the title </h1>

<script>
var textTodisplay= "helloo";
document.write("<h2> + textTodisplay + </h2>");







</script>
</body>


</html>

    Hi, I dont seem to be able to get the variable to work : I must not be getting something. The display is textTodispaly rather than hello , same for the other exercises. On my first try it did and now exercising it wont.

    Thanks a lot for the help

    #29

    Hey @mountainvalue,

    I guesse you made a little mistake in your code. Instead of writing the variable in the string, add it out side it. Your code would look like this below–

    <script>
 var textTodisplay= "helloo"; 
 document.write("<h2>" + textTodisplay + "</h2>"); //the variable is outside the string 
</script>

    This will solve your problem. :slight_smile:

    Happy Learning! :slight_smile:

    1 Like
    #30

    Malik,
    Thanks a lot , but I don’t get it . At all … I basically copied the video and it worked once…there must be a false input somewhere …

    #31

    Hi @mountainvalue,
    If you type the variable between the double quotes, it is considered as a string and not a variable.
    For it to recognise it as a variable, it needs to be outside the double quotes. That’s what I did to your peice of code.

    previously --
 document.write("<h2> + textTodisplay + </h2>");

now -- 
 document.write("<h2>" + textTodisplay + "</h2>");

    Let me know if it’s still not clear.

    Happy Learning! :slight_smile:

    1 Like
    #32

    got it thank a thousand

    #33

    Hello, I am looking for help. So, in the lesson ABSTRACTION and returning values from functions from Javascript course, you did a code for multiplication but I can´t figure out the logic.

    Captura de pantalla (111)
    Captura de pantalla (111)1030×637 60.3 KB

    I just have a few doubts:

    1.- How are you telling toReturn to add “b” times?
    2.- How does the computer knows that the loop For with variable counter means that any value of toReturn means adding that by any “b” times?.

    I know is a simple example and a dumb one but I really want to understand how, hope someone answers, thanks!. @ivan

    #34

    Think the problem with that is that you have spelt ‘length’ incorrectly. So you are not getting the length of the string at all. If you correct it should work.

    1 Like
    #35

    The answer is on line 25. The for loop requires 3 inputs/conditions relating to the counter used for the loop, called counter here but it could be x, y, buttons or whatever.

    The value of counter determines what happens. It needs a starting value, ‘counter = 0’ in this case but you could start at any value.

    It needs a condition for running the loop, in this case it will continue to run while counter is less than b, ‘counter < b’. So the value of b controls how many times the loop runs, executes, goes around.

    Lastly the value of counter needs to change each time otherwise the counter will always be less than b. counter++ adds 1 to counter each time.

    The loop then calls or runs the ‘add’ function which adds ‘a’ to ‘toReturn’ each time the loop executes until counter is no longer less than b which in the example should be 9 times.

    You could describe the condition of each variable while the loop is execting

    e.g.

    Before anything runs (probably a better way to illustrate it than this exists)

    counter is 0
    toReturn is 0
    a is 2
    b is 9

    At the end of the first loop

    counter = 1
    toReturn = 2

    counter < b

    At end of loop 2

    counter = 2
    toReturn = 4

    counter < b still

    and so on

    1 Like
    #36

    Oh okay I see, thank you so much for taking the time to aswer my question! :slight_smile: Now I understand.

    1 Like
    #37

    You’re welcome :smile:

    1 Like
    #38

    hello guys! I’m trying to do a timer with javascript.

    I don’t understand why when I click on the button clear it doesn’t reset the timer to 0 but it still continue to run from where it was stopped.

    In the button clear I reset the variable to zero but somehow it doesn’t work.

    Any Idea of the issue and how to go over it? thanks :slight_smile:

        <script>

    // define seconds, minutes etc to 0
    var s = 0;
    var m = 0;
    var h = 0;
    var d = 0;

    // on click start the timer (if timer was stopped it keeps the values so when started again it continues)
    $("#start").click(function(){
    // function to repeat every second
    x = setInterval(function() {

    // update seconds, minutes etc
    if(s >= 59 && m >= 59 && h >= 23){

    d += 1;
    h = 0;
    m = 0;
    s = 0;
    document.getElementById("timer").innerHTML = d + "d " + h + "h "
    + m + "m " + s + "s ";
    }

    else if(s >= 59 && m >= 59){

    h += 1;
    m = 0;
    s = 0;
    document.getElementById("timer").innerHTML = d + "d " + h + "h "
    + m + "m " + s + "s ";
    }

    else if(s >= 59){

    m +=1;
    s = 0;
    document.getElementById("timer").innerHTML = d + "d " + h + "h "
    + m + "m " + s + "s ";
    }

    else {
    document.getElementById("timer").innerHTML = d + "d " + h + "h "
    + m + "m " + s + "s ";
    s += 1;

    }


  }, 1);
// onclick stop the repeat of the function -> stop the timer
$("#stop").click(function(){clearInterval(x);});

$("#clear").click(function(){
  clearInterval(x)
  var s = 0;
  var m = 0;
  var h = 0;
  var d = 0;
  document.getElementById("timer").innerHTML = d + "d " + h + "h "
  + m + "m " + s + "s ";
  s += 1;


});


  });


     </script>
    #39

    Hi
    anyone know way Ivans presentation (code) on …# is not working in ATOM or VSC
    in Console it gets thru…

    image
    image805×540 42.8 KB

    #40

    Hello @sto, hope you are great.

    I do not understand quite well your question. But your code looks simple and good enough to show the result on the console, what is exactly the issue you are facing?

    If you have any more questions, please let us know so we can help you! :slight_smile:

    Carlos Z.

    #41

    Thanks
    It goes in console but not in ATOM or Visual Studio Code… no understand …
    but no big deal I just move on

    Steinn