Javascript标签位置

我正在研究摩尔斯电码训练器。有26个音频元素(a - z)，每个都有一个隐藏或显示字母的按钮。代码如下所示，为简洁起见，只使用了一个字母。

我的问题是当字母的显示被切换时，它在打印值之前强制换行。我希望字母直接出现在按钮的右边，消除换行符。更好的做法是让每个按钮的文本在"显示"one_answers"显示"之间切换。和元素的字母

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CW Practice</title>
</head>
<body>
<script>
function aFunction() {
var x = document.getElementById("aDIV");
if (x.innerHTML === "") {
x.innerHTML = "A";
} else { 
x.innerHTML = "";
}
}
// followed by bFunction, cFunction, etc.
</script>

<audio controls>
<source src="a.wav" type="audio/wav">
</audio>
<button onclick="aFunction()">Show <div id="aDIV"></div> </button>  
<br>
</body>

</html>

用<span>代替

function aFunction() {
var x = document.getElementById("aDIV");
if (x.innerHTML === "") {
x.innerHTML = "A";
} else { 
x.innerHTML = "";
}
}

<button onclick="aFunction()">Show <span id="aDIV"></span> </button>

或者如果需要设置为<div>可以设置为display: inline-block;

function aFunction() {
var x = document.getElementById("aDIV");
if (x.innerHTML === "") {
x.innerHTML = "A";
} else { 
x.innerHTML = "";
}
}

#aDIV {
display: inline-block;
}

<button onclick="aFunction()">Show <span id="aDIV"></span> </button>

，现在是有趣的部分:您可以使用包含需要显示的值的data-attribute。这样就不需要一遍又一遍地重复这个函数了。比如:

[...document.querySelectorAll('[data-placeholder]')].forEach( item => {
item.addEventListener('click', (event) => {
event.preventDefault();
var x = item.querySelector('.placeholder');
// this one liner is the same as your if / else
x.innerHTML = x.innerHTML === "" ? item.dataset.placeholder : "";
});
});

.placeholder {
padding: 0 0 0 5px;
}

<button data-placeholder="A">Show<span class="placeholder"></span></button>
<button data-placeholder="B">Show<span class="placeholder"></span></button>
<button data-placeholder="C">Show<span class="placeholder"></span></button>

相关内容

最新更新

热门标签：