Javascriptラベルの位置

アラン

私はモールス信号トレーナーに取り組んでいます。26のオーディオ要素(AZ)があり、それぞれに文字を表示または非表示にするボタンがあります。コードは以下にリストされていますが、簡潔にするために1文字だけです。

私の問題は、文字の表示を切り替えると、値を印刷する前に改行を強制することです。ボタンの右側に文字を直接表示して、改行を削除したいと思います。さらに良いのは、各ボタンのテキストを「表示」と要素の文字の間で切り替えることです。

<!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>

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してくださいdebugcn@gmail.com

編集
0

コメントを追加

0

関連記事

分類Dev

TextFieldラベルの境界位置

分類Dev

Shiny: ラベルの位置、textInput

分類Dev

ラベルとTextFieldの位置合わせ

分類Dev

Javascriptラベル

分類Dev

円グラフのmatplotlibパーセントラベルの位置

分類Dev

Pythonでの軸の値とラベルの位置の変更

分類Dev

ggplot2円グラフラベルの位置が悪い

分類Dev

gnuplotxヒストグラム内のラベル位置

分類Dev

左上の位置の境界線上にラベルが付いたTextField

分類Dev

ProgressBar内のラベルキャプションの位置

分類Dev

ggplotの凡例:ラベルに対するキーの位置

分類Dev

ラベルをDIVの中央と左の位置に揃えます

分類Dev

Kivyボタンの位置とラベルの背景色

分類Dev

gnuplotのepslatex端子ラベルとの位置合わせ

分類Dev

ラベル付きの垂直方向の位置合わせ入力

分類Dev

Matplotlib:極プロット軸の目盛りラベルの位置

分類Dev

QTは特定の位置にラベルを追加します

分類Dev

出力に影響を与える宣言ラベルの位置

分類Dev

ハイチャートyAxisplotLinesラベルの位置

分類Dev

ReChartsラベルの位置が機能しない

分類Dev

networkx + graphvizを使用したラベルの位置/表示

分類Dev

ラベルのMatplotlib位置を持つサンキー

分類Dev

Kivyでラベルの位置を変更する

分類Dev

react-chartjs-3のラベル位置を変更する

分類Dev

matplotlib極プロットティック/軸ラベルの位置

分類Dev

ボケのテキスト位置にラベルを付ける

分類Dev

amchartsのカスタマイズされたラベル位置

分類Dev

ドーナツグラフのラベルの位置を変更する

分類Dev

ドーナツグラフのラベルの位置を変更する

Related 関連記事

  1. 1

    TextFieldラベルの境界位置

  2. 2

    Shiny: ラベルの位置、textInput

  3. 3

    ラベルとTextFieldの位置合わせ

  4. 4

    Javascriptラベル

  5. 5

    円グラフのmatplotlibパーセントラベルの位置

  6. 6

    Pythonでの軸の値とラベルの位置の変更

  7. 7

    ggplot2円グラフラベルの位置が悪い

  8. 8

    gnuplotxヒストグラム内のラベル位置

  9. 9

    左上の位置の境界線上にラベルが付いたTextField

  10. 10

    ProgressBar内のラベルキャプションの位置

  11. 11

    ggplotの凡例:ラベルに対するキーの位置

  12. 12

    ラベルをDIVの中央と左の位置に揃えます

  13. 13

    Kivyボタンの位置とラベルの背景色

  14. 14

    gnuplotのepslatex端子ラベルとの位置合わせ

  15. 15

    ラベル付きの垂直方向の位置合わせ入力

  16. 16

    Matplotlib:極プロット軸の目盛りラベルの位置

  17. 17

    QTは特定の位置にラベルを追加します

  18. 18

    出力に影響を与える宣言ラベルの位置

  19. 19

    ハイチャートyAxisplotLinesラベルの位置

  20. 20

    ReChartsラベルの位置が機能しない

  21. 21

    networkx + graphvizを使用したラベルの位置/表示

  22. 22

    ラベルのMatplotlib位置を持つサンキー

  23. 23

    Kivyでラベルの位置を変更する

  24. 24

    react-chartjs-3のラベル位置を変更する

  25. 25

    matplotlib極プロットティック/軸ラベルの位置

  26. 26

    ボケのテキスト位置にラベルを付ける

  27. 27

    amchartsのカスタマイズされたラベル位置

  28. 28

    ドーナツグラフのラベルの位置を変更する

  29. 29

    ドーナツグラフのラベルの位置を変更する

ホットタグ

アーカイブ