這里是令人難以置信的新手編碼員。就像，除了 Tumblr 和 Neopets 教我如何閱讀和進行基本的修補之外，完全是初學者。我可能對這個項目已經咬牙切齒了，有人愿意幫忙嗎？單列中需要 5 個按鈕，“單擊”后文本會發生變化。我讓它適用于 1，但在同一頁面上添加 5 個按鈕時，所有按鈕都是隨機的，我認為它們需要單獨的 ID，但我不知道該怎么做。 <!DOCTYPE html><html><head><style>.button { background-color: #f0c640; border: none; color: #08365F; padding: 32px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 18px; margin: 4px 2px; cursor: pointer; font-family: 'Quattrocento Sans', sans-serif;}</style></head><body><center><input type="button" id= "bf3" class="button" value="BF?" onclick="return change(this);" /><script type="text/javascript">function change( bf3 ){ if (bf3.value === "BF?" ) bf3.value = "boron trifluoride"; else bf3.value = "BF?";}</script></center></body></html><body><center><input type="button" id= "sf6" class="button" value="SF?" onclick="return change(this);" /><script type="text/javascript">function change( sf6 ){ if ( sf6.value === "SF?" ) sf6.value = "sulfur hexafluoride"; else sf6.value = "SF?";}</script></center></body></html><body><center><input type="button" id="h2o" class="button" value="H?O" onclick="return change(this);" /><script type="text/javascript">function change( h2o ){ if ( h2o.value === "H?O" ) h2o.value = "dihydrogen monoxide (aka water)"; else h2o.value = "H?O";}</script></center></body><body><center><input type="button" id="pcl5" class="button" value="PCl?" onclick="return change(this);" /><script type="text/javascript">function change( pcl5 ){ if ( pcl5.value === "PCl?" ) pcl5.value = "phosphorus pentachloride"; else pcl5.value = "PCl?;}</script></center></body></html><body><center><input type="button" class="button" id="n2h4" value="N?H?" onclick="return change(this);" /><script type="text/javascript">function change( n2h4 ){ if ( n2h4.value === "N?H?" ) n2h4.value = "dinitrogen tetrahydride"; else n2h4.value = "N?H?;}</script></center></body></html>
3 回答
ITMISS
TA貢獻1871條經驗 獲得超8個贊
您不需要多個函數來實現這一目標。只需檢查當前單擊按鈕的值并相應地設置該值即可。
嘗試以下方法：
function change(currBtn){
if(currBtn.value == 'BF?' || currBtn.value == 'boron trifluoride'){
if(currBtn.value == 'BF?')
currBtn.value = 'boron trifluoride';
else
currBtn.value = 'BF?';
}
else if(currBtn.value == 'SF?' || currBtn.value == 'sulfur hexafluoride'){
if(currBtn.value == 'SF?')
currBtn.value = 'sulfur hexafluoride';
else
currBtn.value = 'SF?';
}
else if(currBtn.value == 'H?O' || currBtn.value == 'dihydrogen monoxide (aka water)'){
if(currBtn.value == 'H?O')
currBtn.value = 'dihydrogen monoxide (aka water)';
else
currBtn.value = 'H?O';
}
else if(currBtn.value == 'PCl?' || currBtn.value == 'phosphorus pentachloride'){
if(currBtn.value == 'PCl?')
currBtn.value = 'phosphorus pentachloride';
else
currBtn.value = 'PCl?';
}
else if(currBtn.value == 'N?H?' || currBtn.value == 'dinitrogen tetrahydride'){
if(currBtn.value == 'N?H?')
currBtn.value = 'dinitrogen tetrahydride';
else
currBtn.value = 'N?H?'
}
}
.button {
background-color: #f0c640;
border: none;
color: #08365F;
padding: 32px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 18px;
margin: 4px 2px;
cursor: pointer;
font-family: 'Quattrocento Sans', sans-serif;
}
<center>
<input type="button" id= "bf3" class="button" value="BF?" onclick="change(this);" />
</center>
<center>
<input type="button" id= "sf6" class="button" value="SF?" onclick="change(this);" />
</center>
<center>
<input type="button" id="h2o" class="button" value="H?O" onclick="change(this);" />
</center>
<center>
<input type="button" id="pcl5" class="button" value="PCl?" onclick="change(this);" />
</center>
<center>
<input type="button" class="button" id="n2h4" value="N?H?" onclick="change(this);" />
</center>
GCT1015
TA貢獻1827條經驗 獲得超4個贊
為了提高可維護性，我會這樣做：
var container = document.getElementById('container');
var molecules = [
{ formula: "BF?", name: "boron trifluoride" },
{ formula: "SF?", name: "sulfur hexafluoride" },
{ formula: "H?O", name: "dihydrogen monoxide (aka water)" },
{ formula: "PCl?", name: "phosphorus pentachloride" },
{ formula: "N?H?", name: "dinitrogen tetrahydride" }
];
molecules.forEach(function(m) {
var showName = false;
var btn = document.createElement('input');
btn.type = 'button';
btn.className = 'button';
btn.value = m.formula;
btn.addEventListener('click', function() {
showName = !showName;
btn.value = showName ? m.name : m.formula;
});
container.appendChild(btn);
container.appendChild(document.createElement('br'));
});
#container { text-align: center; }
.button {
background-color: #f0c640;
border: none;
color: #08365F;
padding: 32px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 18px;
margin: 4px 2px;
cursor: pointer;
font-family: 'Quattrocento Sans', sans-serif;
}
<div id="container"></div>
莫回無
TA貢獻1865條經驗 獲得超7個贊
我的方式...
const buttonList =
[ [ 'BF?', 'boron trifluoride' ]
, [ 'SF?', 'sulfur hexafluoride' ]
, [ 'H?O', 'dihydrogen monoxide (aka water)' ]
, [ 'PCl?', 'phosphorus pentachloride' ]
, [ 'N?H?', 'dinitrogen tetrahydride' ]
];
buttonList.forEach(bt=>
{
let newbt = document.createElement('button')
, timOut = null;
newbt.className = 'button'
newbt.textContent = bt[0]
document.documentElement.appendChild( newbt )
newbt.onclick=()=>{
newbt.textContent = bt[1]
clearTimeout(timOut)
timOut = setTimeout(()=>{ newbt.textContent = bt[0] }, 1500)
}
})
/* or
buttonList.forEach(bt=>
{
let newbt = document.createElement('button')
, LibNum = 0
newbt.className = 'button'
newbt.textContent = bt[0]
newbt.onclick=()=>{ LibNum = ++LibNum %2; newbt.textContent = bt[LibNum] }
document.documentElement.appendChild( newbt )
})
*/
.button {
font-family: 'Quattrocento Sans', sans-serif;
font-size: 18px;
display: block;
margin: .2em auto;
padding: 1em;
color: #08365F;
background-color: #f0c640;
border: none;
cursor: pointer;
text-align: center;
min-width: 5em;
}
我是否還花時間更正您的代碼來幫助您？
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<title> sample code </title>
<style>
.button {
background-color: #f0c640;
border: none;
color: #08365F;
padding: 32px;
display: block; /* must be block to be centered */
font-size: 18px;
margin: 4px auto; /* this one replace <center> tag (obsolete) */
cursor: pointer;
font-family: 'Quattrocento Sans', sans-serif;
}
</style>
</head>
<body>
<input type="button" id="bf3" class="button" value="BF?" onclick="xchange(this);" />
<input type="button" id="sf6" class="button" value="SF?" onclick="xchange(this);" />
<input type="button" id="h2o" class="button" value="H?O" onclick="xchange(this);" />
<input type="button" id="pcl5" class="button" value="PCl?" onclick="xchange(this);" />
<input type="button" id="n2h4" class="button" value="N?H?" onclick="xchange(this);" />
<script>
function xchange( btn )
{
switch (btn.id) {
case 'bf3': btn.value = (btn.value==='BF?') ? 'boron trifluoride' : 'BF?'; break;
case 'sf6': btn.value = (btn.value==='SF?') ? 'sulfur hexafluoride' : 'SF?'; break;
case 'h2o': btn.value = (btn.value==='H?O') ? 'dihydrogen monoxide (aka water)' : 'H?O'; break;
case 'pcl5': btn.value = (btn.value==='PCl?') ? 'phosphorus pentachloride' : 'PCl?'; break;
case 'n2h4': btn.value = (btn.value==='N?H?') ? 'dinitrogen tetrahydride' : 'N?H?'; break;
} }
</script>
</body>
</html>
- 3 回答
- 0 關注
- 129 瀏覽
添加回答
舉報
0/150
提交
取消