0

I'm trying to write a simple program. I write text in a textfeild, click submit, and it shows up in the console. Sounds simple, right? I thought so too. Unfortunately, when I click submit, the page just goes blank. No errors, it just goes blank. Why is this happening? Even changing the submit button to a regular, generic button did not work.

Here is my code:

function write(){
  var graffiti = document.getElementById("graffiti").value; 
  console.log(graffiti);
}
<!DOCTYPE html>
<html>
  <head>
    <script src="graffiti.js"></script>
  </head>
  <body>
    <input type="text" id="graffiti"><br>
    <input type="submit" value="submit" onclick="write()">
  </body>
</html>

What's the deal?

Nick Parsons
  • 45,728
  • 6
  • 46
  • 64
DennisM
  • 359
  • 1
  • 3
  • 13

1 Answers1

1

try the following way

<!DOCTYPE html>
<html>
  <head> </head>
  <body>
      <input type="text" id="graffiti" /><br />
      <input id="myBtn" type="submit" value="submit" />

    <script>
        function write() {
          var graffiti = document.getElementById("graffiti").value;
          console.log(graffiti);
        }

        document.getElementById("myBtn").addEventListener("click", write);
      </script>
  </body>
</html>

Theory of because this example does not work example

It is not working by the name the function that we are passing on the onclick. I think it brings you conflict with the glocal definition of document.write document.write

Rename write() to myFunction().

<!DOCTYPE html>
<html>
  <head> </head>
  <body>
        <input type="text" id="graffiti"><br>
        <input id="dasd" type="submit" value="submit" onclick="myFunction()">

    <script>
        function myFunction($event){
            var graffiti = document.getElementById("graffiti").value;
            console.log(graffiti);        
        }
    </script>
  </body>
</html>

I leave an interesting link

GonzaH
  • 347
  • 2
  • 12
  • That worked, thank you. But I still wish I knew why the other one didn't. – DennisM Nov 22 '18 at 02:42
  • Crazy!! It's not working the way you're doing by the name of the function when you're calling on the onclick event I think it brings you conflict with the glocal definition of document.write https://www.w3schools.com/jsref/met_doc_write.asp rename write() to myFunction() – GonzaH Nov 22 '18 at 03:18