Bei folgendem Code gibt es nicht den eingegebenen Text aus 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Einkaufsliste</title>
    <link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif:ital,wght@0,700;1,400&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
    <style>
        body{
            background-color: rgb(0, 83, 238);
            font-family: 'Noto Serif', serif;
        }
        .content{
            background-color: white;
            width: 600px;
            margin-left: 660px;
            margin-right: 660px;
            margin-top: 20px;
        }
        .content h1{
            text-align: center;
            font-size: 60px;
        }
        .content form{
            padding-left: 125px;
            width: 200px;
        }


    </style>
</head>
<body>
    <div class="content">
        <h1>Einkaufsliste</h1>


        <!-- Simple Textfield -->
<form action="#">
    <div class="mdl-textfield mdl-js-textfield">
      <input class="mdl-textfield__input"  type="text" id="liste1">
      <label class="mdl-textfield__label"  for="liste1">Produkt</label>
    
    </div>
    <button onclick="subFunc()" class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect">
        <i class="material-icons">add</i>
        <p><var liste></var></p>
      </button>
  </form>
  
  <script>
      function subFunc(){
      var liste = document.getElementById('liste1')
      document.write(liste)


    }
  </script>


    </div>
</body>
</html>