使用HTML和JavaScript制作展开阅读按钮点击无响应如何解决？

问题原因及修复方案 #

1. JavaScript变量引用错误 #

你在代码中把段落元素定义为text变量，但事件回调里错误使用了未定义的details变量，导致代码执行报错。
修改JS代码如下：

const readMoreBtn = document.querySelector('.read-more-button');
const text = document.querySelector('.details');

readMoreBtn.addEventListener('click',(e)=>{
    // 替换为你定义的变量名text，同时建议切换的类名改为show-more避免和span的类名混淆
    text.classList.toggle('show-more');
})

2. 缺少展开状态对应的CSS规则 #

你现有的CSS仅设置了默认状态下span内容隐藏，没有补充父元素添加类后span展示的对应规则，补充代码如下：

/* 默认状态隐藏更多内容 */
.details .read-more{
    display:none;
}
/* 父级添加show-more类后展示更多内容 */
.details.show-more .read-more{
    display: inline;
}

3. 可选：修复HTML笔误 #

你的HTML段落文本后多了一个多余的闭合尖括号，建议修正避免渲染异常：

<p class="details">Text that is displayed<span class="read-more">More text</span></p>
<button class="read-more-button">Read more</button>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>

内容的提问来源于stack exchange，提问作者nuclearwinter27