Javascript string.slice（）に負の値がある

Question

ページのタイトルに基づいてdivを表示または非表示にしようとしています。これは、値をページに渡すより良い方法を見つけられないためにのみ必要です。 HTMLファイルでも

function toggle(divId) { 
    var divArray = document.getElementsByTagName("div"); 
    for(i = 0; i < divArray.length; i++){ 
     if(divArray[i].id == divId){ 
      if(divArray[i].style.display != 'none'){ 
       divArray[i].style.display = 'none'; 
      }else{ 
       divArray[i].style.display = ''; 
      } 
     } 
    } 
} 

    function togglePayLink() { 
    var h1Array = document.getElementsByTagName("h1"); 
    for(i = 0; i < h1Array.length; i++){ 
     if(h1Array[i].id == 'Title'){ 
      var title = h1Array[i].innerHTML; 
      title = title.slice(1); 
      title = title.slice(-4); 
      toggle('descr'+ title); 
     } 
    } 
} 

ページのタイトルと見出しされています

ここでHTMLファイル内の現在のコードです。 %% GLOBAL_PageTitle %%は、私がアクセスできないサーバー側のコードに置き換えられます。ただし、値は「$ 100料金」（数値が異なる）になります。

<h1 id="Title" class="TitleHeading">%%GLOBAL_PageTitle%%</h1> 

は最後に、私は、フォーマットDESCR +数のidの持つ隠されたdiv要素のセットを持っているので、ページのタイトルは「$ 100料金」である場合、私は、ID「descr100」とdiv要素を示したいと思います。

<div id="descr100" style="display:none;width: 75%;"></div> 

上記のスクリプトを実行するとエラーは表示されません（私はChromeのコンソールを使用しています）が、divは表示されません。私はトグル機能が動作していることは分かっています。なぜなら、以前はトグルしなければならなかったページ上の1つのdivだけで使用されていたからです。私は問題と思われるtogglePayLink関数を書いたが、これをどのようにデバッグするのか分からない。私は、タイトルのドル記号が問題を引き起こす可能性があるのだろうかと思っていましたが、そうであればエラーが出ると思います。

EDIT：togglePayLink関数をstringの代わりにvarを使用するように変更しましたが、slice（）が呼び出されたときにtypeErrorが発生しました。

Answer 1

title.slice（-4）は、私が思ったように、最後の4桁の前のすべてではなく、文字列の最後の4桁を私に与えていました。存在しない 'descrFee' divを切り替えることは何もしていませんでした。

Answer 2

問題はここにある：JavaScriptで

String title = h1Array[i].innerHTML; 

、すべての変数は、（他の方法を設定できる機能を除く）VARに設定されています。だから、次のようになります。

<script language="javascript"> 
    var title; 
    function togglePayLink() { 
     var h1Array = document.getElementsByTagName("h1"); 
     for(i = 0; i < h1Array.length; i++){ 
      if(h1Array[i].id == 'Title'){ 
       title = h1Array[i].innerHTML; 
       title = title.slice(1); 
       title = title.slice(-4); 
       toggle('descr'+ title); 
      } 
     } 
    } 
</script> 

：

var title = h1Array[i].innerHTML; 

また、あなたはおそらく、あなたがループのためにそれを設定しているときに、「VAR」を省略することになる場合には、ループの外でそれを定義する必要があります

編集：forループでのみ使用し、別の繰り返しで使用する場合は、ローカルで定義できるかどうかわかりません。しかし、私はまだそれをグローバルに定義しています。

Answer 3

今後、%% GLOBAL_PageTitle %%を使用してページに一意のクラスを割り当ててください。この方法で、CSSを使用して要素を表示/非表示にすることができます。 BigCommerceは、個々のページ（例：Webページ、アカウント、カート）のためにH1のHTMLへのアクセス権を与えないページの場合

<div class="page %%GLOBAL_PageTitle%%"> 

、私は通常、ページタイトルを取り除くために、ページの読み込みにこのスクリプトを実行しますページ要素に特定のクラスを割り当てます。

var catName = $('.TitleHeading').text(); 
var catName = catName.replace(/ /g, '');   
var catName = catName.replace(/'/g, ''); 
var catName = catName.replace(/&/g, ''); 
var catName = $.trim(catName); 
$('.page').addClass(''+catName+''); 

あなたのやり方は少し上にあるようですが、それが他の人によってこのように設定されていれば分かります。