-2

I am having a problem to send the code to my <p> tag where am I going wrong?

<html>

<body>
  <p id="100"> </p>
  <script>
    var dictionary
    var lower

    function start() {
      var dictionary = "house";
      lower = dictionary.toString().toLowerCase();
    }
    document.getElementById("100").innerHTML == document.getElementById([lower]).value
    start()
  </script>
</body>

</html>
Vadim Kotov
  • 7,103
  • 8
  • 44
  • 57
Souradip Mandal
  • 31
  • 6

2 Answers2

3

What your script does is:

  1. Try to get element with id "100" (btw. starting ids with a number is bad practice although it might work in some browsers — see What are valid values for the id attribute in HTML?). It might fail to detect the element, because of bad naming.
  2. Expecting the element would have been found, you don’t assign the new innerHTML (which would work with a =), but make a comparison with a ==.
  3. Then you try to find an element by [lower]. First, getElementById expects a string and second lower is undefined at this moment. It hasn’t been set yet. It will be set in the next line, where you execute start(). Also notice that only <p> does not have a value. In this case better go with innerText. If you just want the paragraph to show the value of lower, just assign lower like: document.getElementById("100").innerText = lower;
  4. toString() is not needed if the argument is always a string. Then it would just be
var dictionary = "HouSe";
document.getElementById("a100").innerText = dictionary.toLowerCase();

A working example could be:

function toLowerCaseString(value) {
    return value.toString().toLowerCase();
}

var dictionary = "HouSe";

document.getElementById("a100").innerText=toLowerCaseString(dictionary);
<html>
  <body>
    <p id="a100"></p>
  </body> 
</html>
Matthi
  • 981
  • 6
  • 16
0

remarks are in the comment in code snippet.

<html>
<body>
<p id="A100"> </p>
<script>
var dictionary,lower;
function start(){dictionary="house";
lower=dictionary.toString().toLowerCase();
//you need to return something for the function output to be consumed somewhere else 
return lower;
}
//you use start output to render innerhtml
// you dont do another document.get because lower is not a dom element its is Js object and we have used start return to make is consumable
// == is comparative = is used as setter we are setting not comparing as code would suggest 
document.getElementById("A100").innerHTML=start();
</script>
</body> 
</html>

Local scope example as suggested by Mathi;

<html>
<body>
<p id="A100"> </p>
<script>

function start(){
let dictionary, lower;
dictionary="house";
lower=dictionary.toString().toLowerCase();
 
return lower;
}
document.getElementById("A100").innerHTML=start();
</script>
</body> 
</html>
Syed
  • 482
  • 1
  • 3
  • 10
  • thank you very much – Souradip Mandal May 20 '21 at 12:52
  • There are two strange things. You declare dictionary twice and use lower from the global space, which does not really make sense ;-) – Matthi May 20 '21 at 13:02
  • @Matthi since it was clear as of rest of OP scope so I didn't mess about much with scoping as such. Using var from global or let from local they both stand valid depending upon OPs own context of how things play with each other However, taking you suggestion I would include another example using local scope only :) – Syed May 20 '21 at 16:51
  • 1
    @Syed I did not the suggest the code above! Still does not make any sense. It would be nice to leave good code here for others who have similar issues. I already committed an answer with a nicer solution, but it seems you have not accepted it. For this, I am out. – Matthi May 20 '21 at 17:22
  • @Matthi you suggestion is valid and was rightly so that is declaring dictionary twice which was an oversight on my part as I didn't fully remove all possible typos for OPs code. and please be noted your suggestion is related to scope i.e. global vs local - not per say the code beautification. nevertheless your above suggestions are meaningful and have been accepted in that sense. thank fo your contributions – Syed May 20 '21 at 17:47