在 HTML 中单击按钮更改变量值
[英]Change variable value on button click in HTML
问题描述
下面我发布了我的下拉菜单的代码。 最后，有一个名为variableToChange=""的变量。
对于更有经验的人来说，这可能是一个简单的问题，但我希望每次按下某个按钮来更改变量的值。 假设它应该将按钮的文本作为新值。
我想它应该on click部分的某个地方实现，但我缺乏这里的经验，所以我无法真正实现它。 我真的很感激一些帮助。
更新：预期的情况是：当我按下名为 AA 的按钮时，variableToChange 的值应更改为“AA”。 同样，如果我之后按 BC，它应该再次更改为“BC”。
//How const how_Tab = document.getElementById('a') const how_tabName = how_Tab.querySelector('.tab-name') const how_Links = document.querySelector('.how-links') how_Tab.addEventListener('click', e => { const isOpen = how_Links.classList.contains('open') if (isOpen) how_Links.classList.remove('open') else how_Links.classList.add('open') }) // link event listeners const how_links = [...how_Links.children] // turn this into an array how_links.forEach(how_link => how_link.addEventListener('click', e => { how_tabName.innerText = how_link.innerText })) //Type const type_Tab = document.getElementById('b') const type_tabName = type_Tab.querySelector('.tab-name') const type_Links = document.querySelector('.type-links') type_Tab.addEventListener('click', e => { const isOpen = type_Links.classList.contains('open') if (isOpen) type_Links.classList.remove('open') else type_Links.classList.add('open') }) const type_links = [...type_Links.children] // turn this into an array type_links.forEach(type_link => type_link.addEventListener('click', e => { type_tabName.innerText = type_link.innerText })) var variableToChange = "";
* { padding: 0; margin: 0; box-sizing: border-box; font-family: 'Segoe UI', sans-serif; } nav { position: fixed; width: 100%; height: 50px; background: #222; top: 0; left: 0; color: white; display: flex; z-index: 1000; } nav>* { flex: 1; } nav ul { display: flex; list-style: none; height: 100%; } nav ul li { position: relative; flex: 1; background: #222; height: 100%; display: flex; justify-content: center; align-items: center; cursor: pointer; transition: 0.2s; } nav ul li:hover { background: #555; }.how-links { position: absolute; display: flex; flex-direction: column; justify-content: center; left: 0; top: 100%; width: 100%; background-color: white; color: black; /* This is the height of this div + height of the nav bar */ transform: translateY(-135%); transition: 0.2s; z-index: -1; }.how-links.open { transform: translateY(0); }.how-link { height: 50px; display: flex; align-items: center; padding-left: 20px; text-decoration: none; color: white; cursor: pointer; transition: 0.2s; background: #222; color: white; }.how-link:hover { background: #555; }.type-links { position: absolute; display: flex; flex-direction: column; justify-content: center; left: 0; top: 100%; width: 100%; background-color: white; color: black; /* This is the height of this div + height of the nav bar */ transform: translateY(-135%); transition: 0.2s; z-index: -1; }.type-links.open { transform: translateY(0); }.type-link { height: 50px; display: flex; align-items: center; padding-left: 20px; text-decoration: none; color: white; cursor: pointer; transition: 0.2s; background: #222; color: white; }.type-link:hover { background: #555; }.markers-links { position: absolute; display: flex; flex-direction: column; justify-content: center; left: 0; top: 100%; width: 100%; background-color: white; color: black; /* This is the height of this div + height of the nav bar */ transform: translateY(-135%); transition: 0.2s; z-index: -1; }.markers-links.open { transform: translateY(0); }.markers-link { height: 50px; display: flex; align-items: center; padding-left: 20px; text-decoration: none; color: white; cursor: pointer; transition: 0.2s; background: #222; color: white; }.markers-link:hover { background: #555; }
<body> <div id="root"></div> <nav> <ul> <li id="a"> <span class="tab-name"><i class="fa fa-eercast"></i>A</span> <div class="how-links"> <a class="how-link" href="#"> <option value="car"></option><i class="fa fa-car"></i> AA</a> <a class="how-link" href="#"> <option value="bike"></option><i class="fa fa-road"></i> AB</a> <a class="how-link" href="#"> <option value="foot"></option><i class="fa fa-paw"></i> AC</a> </div> </li> <li id="b"> <span class="tab-name"><i class="fa fa-asterisk"></i> B</span> <div class="type-links"> <a class="type-link" href="#"><i class="fa fa-rocket"></i> BA</a> <a class="type-link" href="#"><i class="fa fa-life-ring" aria-hidden="true"></i> BB</a> <a class="type-link" href="#"><i class="fa fa-wifi"></i> BC</a> <a class="type-link" href="#"><i class="fa fa-leaf"></i> BD</a> </div> </li> </ul> </nav> </body>
1 个解决方案
解决方案1
0 已采纳 2021-06-07 23:27:08
你只需要添加
variableToChange = how_link.textContent.trim();
showValue.textContent = variableToChange // To show in the output
//How const showValue = document.querySelector("#showValue"); let variableToChange = ""; const how_Tab = document.getElementById('a') const how_tabName = how_Tab.querySelector('.tab-name') const how_Links = document.querySelector('.how-links') how_Tab.addEventListener('click', e => { const isOpen = how_Links.classList.contains('open') if (isOpen) how_Links.classList.remove('open') else how_Links.classList.add('open') }) // link event listeners const how_links = [...how_Links.children] // turn this into an array how_links.forEach(how_link => how_link.addEventListener('click', e => { how_tabName.innerText = how_link.innerText variableToChange = how_link.textContent.trim(); // CHANGE showValue.textContent = variableToChange })) //Type const type_Tab = document.getElementById('b') const type_tabName = type_Tab.querySelector('.tab-name') const type_Links = document.querySelector('.type-links') type_Tab.addEventListener('click', e => { const isOpen = type_Links.classList.contains('open') if (isOpen) type_Links.classList.remove('open') else type_Links.classList.add('open') }) const type_links = [...type_Links.children] // turn this into an array type_links.forEach(type_link => type_link.addEventListener('click', e => { type_tabName.innerText = type_link.innerText variableToChange = type_link.textContent.trim() // CHANGE showValue.textContent = variableToChange }))
* { padding: 0; margin: 0; box-sizing: border-box; font-family: 'Segoe UI', sans-serif; } nav { position: fixed; width: 100%; height: 50px; background: #222; top: 0; left: 0; color: white; display: flex; z-index: 1000; } nav>* { flex: 1; } nav ul { display: flex; list-style: none; height: 100%; } nav ul li { position: relative; flex: 1; background: #222; height: 100%; display: flex; justify-content: center; align-items: center; cursor: pointer; transition: 0.2s; } nav ul li:hover { background: #555; }.how-links { position: absolute; display: flex; flex-direction: column; justify-content: center; left: 0; top: 100%; width: 100%; background-color: white; color: black; /* This is the height of this div + height of the nav bar */ transform: translateY(-135%); transition: 0.2s; z-index: -1; }.how-links.open { transform: translateY(0); }.how-link { height: 50px; display: flex; align-items: center; padding-left: 20px; text-decoration: none; color: white; cursor: pointer; transition: 0.2s; background: #222; color: white; }.how-link:hover { background: #555; }.type-links { position: absolute; display: flex; flex-direction: column; justify-content: center; left: 0; top: 100%; width: 100%; background-color: white; color: black; /* This is the height of this div + height of the nav bar */ transform: translateY(-135%); transition: 0.2s; z-index: -1; }.type-links.open { transform: translateY(0); }.type-link { height: 50px; display: flex; align-items: center; padding-left: 20px; text-decoration: none; color: white; cursor: pointer; transition: 0.2s; background: #222; color: white; }.type-link:hover { background: #555; }.markers-links { position: absolute; display: flex; flex-direction: column; justify-content: center; left: 0; top: 100%; width: 100%; background-color: white; color: black; /* This is the height of this div + height of the nav bar */ transform: translateY(-135%); transition: 0.2s; z-index: -1; }.markers-links.open { transform: translateY(0); }.markers-link { height: 50px; display: flex; align-items: center; padding-left: 20px; text-decoration: none; color: white; cursor: pointer; transition: 0.2s; background: #222; color: white; }.markers-link:hover { background: #555; } #showValue { margin-top: 5rem; }
<div id="root"></div> <nav> <ul> <li id="a"> <span class="tab-name"><i class="fa fa-eercast"></i>A</span> <div class="how-links"> <a class="how-link" href="#"> <option value="car"></option><i class="fa fa-car"></i> AA </a> <a class="how-link" href="#"> <option value="bike"></option><i class="fa fa-road"></i> AB </a> <a class="how-link" href="#"> <option value="foot"></option><i class="fa fa-paw"></i> AC </a> </div> </li> <li id="b"> <span class="tab-name"><i class="fa fa-asterisk"></i> B</span> <div class="type-links"> <a class="type-link" href="#"><i class="fa fa-rocket"></i> BA</a> <a class="type-link" href="#"><i class="fa fa-life-ring" aria-hidden="true"></i> BB</a> <a class="type-link" href="#"><i class="fa fa-wifi"></i> BC</a> <a class="type-link" href="#"><i class="fa fa-leaf"></i> BD</a> </div> </li> </ul> </nav> <h5 id="showValue"></h5>
解析HTML页面，并在单击按钮时将值分配给PHP变量
[英]Parse a HTML page and assign <b>value</b> to a PHP variable on button click
作法：按一下按钮，将html span（文字）更改为任何输入值
[英]How to: click button, change html span (text) to whatever input value
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.