获取api API返回未定义的[关闭]

Question

我正在使用电影数据库API，并且已经在我的浏览器中使用API密钥和查询测试了此链接的输入，并且可以正常工作。结果如下图。

但是，当我尝试实现一个功能，该功能将搜索电影并将电影标题作为H1元素返回时，它将返回undefined。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="script.js" defer></script>

</head>
<body>
    <input type="search" id="search"/>
    <button id="submit">Submit</button>
    <h1 id="title">Movie</h1>
</body>
</html>

const API_KEY = '*************************'
const query = document.getElementById('search')
const button = document.getElementById('submit')
const title = document.getElementById('title')


button.addEventListener('click', function(name) {
    fetch(`https://api.themoviedb.org/3/search/movie?api_key=${API_KEY}&query=${query}`)
    .then(response => response.json())
    .then(data => {
        var titleValue = ['results']['title'];

        title.innerHTML = titleValue;

        query.value ="";
    })
})

我也尝试过

var titleValue = ['results'][0]['title'];

以及一些其他数字和不同的输入，例如“ popularity”代替title，并且每次按钮将“ undefined”返回到h1元素或不执行任何操作。