htmlにjavascript変数を渡す

-2

私はfilter.htmlとfilter.jsの2つのファイルを持っています。 filter.html私はidが "test"のdivを持っていて、filter.jsには "finishedHTML"という名前の変数があります。htmlにjavascript変数を渡す

ここでは、 "finishedHTML"の内容をhtmlコードとしてテストdivに書きたいと思いますが、htmlの "finishedHTML"は空です。この問題を解決するにはどうすればよいですか？

出典：

var finishedHTML = "<h2>Yes it works</h2>"

header { 
 
    display: block; 
 
    background: #A2AFBC; 
 
    top: 0; 
 
    height: 50px; 
 
    position: fixed; 
 
    width: 100%; 
 
    text-align: center; 
 
} 
 

 
footer { 
 
    height: 50px; 
 
    width: 100%; 
 
    bottom: 0px; 
 
    left: 0px; 
 
    background: #A2AFBC; 
 
    position: fixed; 
 
} 
 
.headerTitle { 
 
    font-size: 2.0em; 
 
    font-family: Verdana; 
 
    font-weight: 100; 
 
    color: #506B84; 
 
    margin: 0em; 
 
    font-weight: bold; 
 
} 
 

 
h2 { 
 
    font-size: 3.0 em; 
 
    color: red; 
 
}

<html>  
 
<head> 
 
    <title>title</title> 
 
    <link rel="stylesheet" href="style.css" type="text/css" > 
 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" > 
 
    <link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico" > 
 
    <!--Filter.js--> 
 
    <script language="javascript" type="text/javascript" src="filter.js"></script> 
 
</head> 
 
<body> 
 
    <header> 
 
     <span class="headerTitle">Header Text</span> 
 
    </header> 
 

 
    <div id="test" style="margin-left: 300px; padding-top: 300px;"> 
 
     <h1>This is a test text</h1> 
 
    </div> 
 
    <script language="javascript" type="text/javascript"> 
 
     document.getElementById('test').innerHTML = finishedHTML; 
 
    </script> 
 
    <footer> 
 
    </footer> 
 
</body> 
 
</html>

おかげで4人のあなたの助け！

出典

2017-08-18 letsTry420

？ – jackarms

はい、どこが完成したのですか？HTML？ – Merigold

あなたのコードが動作します。私はこれらの2つのファイルを作成し、正しい結果を得る。 – Huelfe

変数finishedHTMLは、宣言された後でのみ使用できます。したがって、innerHTMLを設定する前にそれを宣言してください。

var finishedHTML = "<h2>Yes it works</h2>"; 
 
document.getElementById('test').innerHTML = finishedHTML;

header { 
 
     display: block; 
 
     background: #A2AFBC; 
 
     top: 0; 
 
     height: 50px; 
 
     position: fixed; 
 
     width: 100%; 
 
     text-align: center; 
 
    } 
 
    
 
footer { 
 
     height: 50px; 
 
     width: 100%; 
 
     bottom: 0px; 
 
     left: 0px; 
 
     background: #A2AFBC; 
 
     position: fixed; 
 
    } 
 
.headerTitle { 
 
    font-size: 2.0em; 
 
    font-family: Verdana; 
 
    font-weight: 100; 
 
    color: #506B84; 
 
    margin: 0em; 
 
    font-weight: bold; 
 
    
 
} 
 

 
h2 { 
 
    font-size: 3.0 em; 
 
    color: red; 
 
    
 
}

<html>  
 
    <head> 
 
     <title>title</title> 
 
     <link rel="stylesheet" href="style.css" type="text/css" > 
 
     <meta http-equiv="content-type" content="text/html; charset=UTF-8" > 
 
     <link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico" > 
 
     <!--Filter.js--> 
 
     <script language="javascript" type="text/javascript" src="filter.js"></script> 
 
    </head> 
 
    <body> 
 
     <header> 
 
      <span class="headerTitle">Header Text</span> 
 
     </header> 
 
     <!-- style="margin-left: 300px; padding-top: 300px;"--> 
 
     <div id="test" style="margin-top: 100px;"> 
 
      <h1>This is a test text</h1> 
 
     </div> 
 
     
 
     <footer> 
 
     </footer> 
 
    </body> 
 
</html>

出典

2017-08-18 09:00:48 Nisarg

私は馬鹿です..あなたの助けてくれてありがとう、私は十分なRepを持っているなら、私はそれを投票する良い一日を！ – letsTry420

filter.jsに移動document.getElementById('test').innerHTML = finishedHTML;。

出典

2017-08-18 09:03:48 kratostoical

はい、私はすでにこれをして、今それは動作します。どうも！ – letsTry420

@ letsTry420将来のユーザーのためにこの回答をupvoting/acceptすることを検討してください – Ivan

<html>  
    <head> 
     <title>title</title> 
     <link rel="stylesheet" href="style.css" type="text/css" > 
     <meta http-equiv="content-type" content="text/html; charset=UTF-8" > 
     <link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico" > 
    </head> 
    <body> 
     <header> 
      <span class="headerTitle">Header Text</span> 
     </header> 

     <div id="test" style="margin-left: 300px; padding-top: 300px;"> 
      <h1>This is a test text</h1> 
     </div> 
     <!--Filter.js--> 
     <script language="javascript" type="text/javascript" src="filter.js"></script> 
     <script language="javascript" type="text/javascript"> 
      document.getElementById('test').innerHTML = finishedHTML; 
     </script> 
     <footer> 
     </footer> 
    </body> 
</html>

はちょっと私だけのために、このその作業罰金を確認し、あなたのasysncロード・スクリプトの問題を解決することができます

出典

2017-08-18 09:05:20

体内の<script>を置きます。おかげであなたは `finishedHTML`を宣言している

<html>  
 
    <head> 
 
     <title>title</title> 
 
     <link rel="stylesheet" href="style.css" type="text/css" > 
 
     <meta http-equiv="content-type" content="text/html; charset=UTF-8" > 
 
     <link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico" > 
 
     <!--Filter.js--> 
 
     <script language="javascript" type="text/javascript" src="filter.js"></script> 
 
    </head> 
 
    <body> 
 
     <header> 
 
      <span class="headerTitle">Header Text</span> 
 
     </header> 
 
     
 
     <div id="test" style="margin-left: 300px; padding-top: 30px;"> 
 
      <h1>This is a test text</h1> 
 
     </div> 
 
     <script language="javascript" type="text/javascript"> 
 
      var finishedHTML = "<h2>Yes it works</h2>"; 
 
      console.log(finishedHTML); 
 
      document.getElementById('test').innerHTML = finishedHTML; 
 
     </script> 
 
     <footer> 
 
     </footer> 
 
    </body> 
 
</html>

出典

2017-08-18 09:09:48

htmlにjavascript変数を渡す

答えて

関連する問題