スプシ~HTMLへデータ受渡し後クリップボードへコピー（空白データの処理方法）

先輩方、どうかご教示ください
※質問サイトへの質問は本サイトが初めてなので失礼がございましたら遠慮なくご指摘下さいm(_ _)m

前提・実現したいこと
１．「オーダー番号」を設定する（index.html)
２．「データ検索」ボタンを押す
３．スプシから該当するオーダ番号のデータを呼び出して表示（result.html)
４．「COPY」ボタンで、各テキストボックスの値をクリップボードにコピー（result.html)
発生している問題
上記、検索結果は表示・コピーされるようにはなったのですが、データに空白があるとエラーがでてしまいます。

　エラーメッセージ
Exception: 形式が正しくない HTML コンテンツ: id="adv_web_page"></td> （行 40）
スプシのデータ（ピンクの枠が空白とした場合）上のエラーがでます。

▼手順

index.html

　１.オーダー番号を設定して「データ検索」ボタンを押す

result.html

2.データを表示　テキストの真横の「COPY」ボタンを押すとクリップボードにコピーされる

▼結果１
【スプシに空白がないとき】うまく動く

▼結果２
【スプシに空白があるとき】エラーとなる

試したこと
copyToClipboard(row_id, thisbutton) の function 内で、
// テキストエリアを用意する
var copyFrom = document.createElement("textarea");
↓
この後に、copyTargetの値の長さが０以上の場合、copyFrom.textContentにそのままの値を設定、空白の場合は、空白を設定するよう変更してみたがそれもエラーでダメでした。書き方間違っていたら教えて下さいませ。
// もし値が入っていたら値を入れ、空白の場合は”空白”を入れる
if (copyTarget.length > 0) {
copyFrom.textContent = copyTarget;
}　else {
copyFrom.textContent = ’空白’;
}
ーー↑結果、同じエラーがでたため、他の方の質問を参考に書き方を変えてみました。
if (copyTarget.value==""){
copyFrom.textContent = ’空白’;
}　else {
copyFrom.textContent = copyTarget;
}
ーー↑結果、同じエラーとなってしまいます(´；ω；｀)

ーーー以下、コード、index.html、index.html、result.htmlの順で記載いたしております。ーーー

//コード
function doGet() {
  const htmlTemplate = HtmlService.createTemplateFromFile('index');
  htmlTemplate.errorMsg = "";
  return htmlTemplate.evaluate();

}

function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename).getContent();
}

function doPost(e) {
  // const sheet = SpreadsheetApp.openById("xxxxxxデータのあるスプレットシートのIDを設定xxxxxxxx").getSheetByName("xxスプレットシートのシート名設定xx");
  const sheet = SpreadsheetApp.openById("1T-bUpAARJvRFEV2fRQsE7isKsD4QAochyVFoK5DWT90").getSheetByName("顧客データ");
  
  // const sheet = SpreadsheetApp.openById("（シートのIDをここへ設定）").getSheetByName("シート名をここへ設定");
  const data = sheet.getDataRange().getValues();

  let examNum;　//3列目
  let acc_class;　//4列目
  let result;//7列目
  let adv;　//8列目
  let adv_web_page; //10列目
  let anken_mei;//11列目

  for ( const record of data ){

     if ( e.parameter.examNum == record[3]){
      examNum = record[3];//オーダー番号
      acc_class= record[4];//種別
      result = record[7];//担当者名
      adv = record[8];//顧客会社名
      adv_web_page= record[10];//顧客会社名webページURL
      anken_mei = record[11];//案件名

      break;
    }
  }

  if ( result && adv ){
    htmlTemplate = HtmlService.createTemplateFromFile('result');
    htmlTemplate.examNum = examNum;
    htmlTemplate.acc_class = acc_class;
    htmlTemplate.result = result;
    htmlTemplate.adv = adv;
    htmlTemplate.adv_web_page = adv_web_page;
    htmlTemplate.anken_mei = anken_mei;
  
  } else {
    htmlTemplate = HtmlService.createTemplateFromFile('index');
    htmlTemplate.errorMsg = "オーダー番号が間違っています";
  }

  return htmlTemplate.evaluate();
}

//index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <base target="_top">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>データ表示後コピー用サイト</title>
  </head>

  <body>
    <header>
      <h1>データ表示してコピーできるボタンを設定するサイト</h1>
    </header>

    <form action="https://script.google.com/a/macros/sold-out.co.jp/s/AKfycbxOWeNJNpqwoW2RBRx4GFmM8xfGd3SoInOSJuT1zFtc6icSrxGEwgaP1LUKy8mNEuj7/exec" method="post">   
    

      <p><?=errorMsg ?></p>
      <div>
        <label for="exam-num">オーダー番号</label>
        <input type="text" name="examNum" required>
      </div>

      <div>
        <input type="submit" value="データ検索">
      </div>
    </form>
  </body>
</html>

//result.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>データ表示後コピー用サイト_title</title>
  </head>

  <body>
    <header>
      <h1>データ表示後コピー用サイト✿</h1>
    </header>
    <h2>検索結果</h2>
    <table>
      <tbody>


        <tr>
          <td>オーダー番号</td>
          <td><?=examNum ?></td>
        </tr>


        <tr id="result">
          <th>担当者名</th>
          <td><input type="text" value=<?=result ?> id="result"></td>
          <td><button class="btn-square" onclick="copyToClipboard(result, this)">COPY</button></td>
        </tr>
  
        <tr>
        <tr id="adv">
          <th>顧客会社名</th>
          <td><input type="text" value=<?=adv ?> id="adv"></td>
         <td><button class="btn-square" onclick="copyToClipboard(adv, this)">COPY</button></td>
        </tr>

        <tr id="adv_web_page">
          <th>顧客会社名webページURL</th>
          <td><input type="text" value=<?=adv_web_page ?> id="adv_web_page"></td>
          <td><button class="btn-square" onclick="copyToClipboard(adv_web_page, this)">COPY</button></td>
        </tr>

        <tr id="acc_class">
          <th>種別</th>
          <td><?=acc_class ?></td>
        </tr>

        <tr id="anken_mei">
          <th>案件名</th>
          <td><input type="text" value=<?=anken_mei ?> id="anken_mei"></td>
          <td><button class="btn-square" onclick="copyToClipboard(anken_mei, this)">COPY</button></td>
        </tr>

      </tbody>
    </table>

    <script>
    

   function copyToClipboard(row_id, thisbutton) {
  
  
          document.getElementById('adv').cells[1].innerHTML = <?=adv ?>;//顧客会社名
          document.getElementById('acc_class').cells[1].innerHTML =<?=acc_class ?>;//種別
          document.getElementById('result').cells[1].innerHTML = <?= result ?>;//担当者名
          document.getElementById('adv_web_page').cells[1].innerHTML = <?= adv_web_page ?>;//顧客会社名webページURL
          document.getElementById('anken_mei').cells[1].innerHTML =<?=anken_mei ?>;//案件名 

      // コピー対象をJavaScript上で変数として定義する
      var copyTarget = row_id.cells[1].innerHTML;

      // テキストエリアを用意する
      var copyFrom = document.createElement("textarea");

      // テキストエリアへ値をセット
      copyFrom.textContent = copyTarget;
      // bodyタグの要素を取得
      var bodyElm = document.getElementsByTagName("body")[0];
      // 子要素にテキストエリアを配置
      bodyElm.appendChild(copyFrom);
      // コピー対象のテキストを選択する
      copyFrom.select();
      // 選択しているテキストをクリップボードにコピーする
      document.execCommand("copy");
      // 追加テキストエリアを削除
      bodyElm.removeChild(copyFrom);
      
      // ボタンの色とテキストを変更
      thisbutton.style.backgroundColor = "hotpink";
      // 処理結果を返却
      return retVal;
        }

  </script>

  </body>
</html>

Lhankor_Mhy

2022/02/22 06:18

詳しくないのですが、 value=<?=adv_web_page ?> ↑これはクォーテーションなしでいいのですか？空文字列などが入ると面倒なことになりそうですが。

tottey1226

2022/02/22 08:33 編集

ご返信ありがとうございます！すみません！クォーテーションいれたほうがいいのですか。初心者なのでこれでいいと思いこんでいました。もしかしたら、今回、ご指摘いただいた件が問題なのかもしれないです。クォーテーションはどのようにいれたらいいのでしょうか。

行動規範の内容に同意します

回答2件

ベストアンサー

HTMLにおいてidは一意でなければいけません。
trとinputに同じidが振られているので、それを直してみてください。

投稿2022/02/23 23:17

macaron_xxx

総合スコア3191

tottey1226

2022/02/24 06:40 編集

macaron_xxx様　ありがとうございます！そうなんですね。勉強になります。やってみます！

tottey1226

2022/02/24 07:14

macaron_xxx様ご指摘いただいた通り、書き直してみたところ空白のある行のデータも無事表示されました！ありがとうございます！！！ネットでいくら調べてもわからなかったので。。ほんと助かりました。m(_ _)m ーーー例えば、以下のように、顧客会社名webページURLのところでは、tr の方のidだけにして、inputの方にあるidは削除致しました。 <tr id="adv_web_page"> <th>顧客会社名webページURL</th> <td><input type="text" value=<?=adv_web_page ?>></td> <td><button class="btn-square" onclick="copyToClipboard(adv_web_page, this)">COPY</button></td> </tr> ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー以下が修正後のresult.htmlとなります。ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー <!DOCTYPE html> <html> <head> <base target="_top"> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>データ表示後コピー用サイト_title</title> </head> <body> <header> <h1>データ表示後コピー用サイト✿</h1> </header> <h2>検索結果</h2> <table> <tbody> <tr> <td>オーダー番号</td> <td><?=examNum ?></td> </tr> <tr id="result"> <th>担当者名</th> <td><input type="text" value=<?=result ?>></td> <td><button class="btn-square" onclick="copyToClipboard(result, this)">COPY</button></td> </tr> <tr> <tr id="adv"> <th>顧客会社名</th> <td><input type="text" value=<?=adv ?>></td> <td><button class="btn-square" onclick="copyToClipboard(adv, this)">COPY</button></td> </tr> <tr id="adv_web_page"> <th>顧客会社名webページURL</th> <td><input type="text" value=<?=adv_web_page ?>></td> <td><button class="btn-square" onclick="copyToClipboard(adv_web_page, this)">COPY</button></td> </tr> <tr id="acc_class"> <th>種別</th> <td><?=acc_class ?></td> </tr> <tr id="anken_mei"> <th>案件名</th> <td><input type="text" value=<?=anken_mei ?>></td> <td><button class="btn-square" onclick="copyToClipboard(anken_mei, this)">COPY</button></td> </tr> </tbody> </table> <script> function copyToClipboard(row_id, thisbutton) { document.getElementById('adv').cells[1].innerHTML = <?=adv ?>;//顧客会社名 document.getElementById('acc_class').cells[1].innerHTML =<?=acc_class ?>;//種別 document.getElementById('result').cells[1].innerHTML = <?= result ?>;//担当者名 document.getElementById('adv_web_page').cells[1].innerHTML = <?= adv_web_page ?>;//顧客会社名webページURL document.getElementById('anken_mei').cells[1].innerHTML =<?=anken_mei ?>;//案件名 // コピー対象をJavaScript上で変数として定義する var copyTarget = row_id.cells[1].innerHTML; // テキストエリアを用意する var copyFrom = document.createElement("textarea"); // テキストエリアへ値をセット copyFrom.textContent = copyTarget; // bodyタグの要素を取得 var bodyElm = document.getElementsByTagName("body")[0]; // 子要素にテキストエリアを配置 bodyElm.appendChild(copyFrom); // コピー対象のテキストを選択する copyFrom.select(); // 選択しているテキストをクリップボードにコピーする document.execCommand("copy"); // 追加テキストエリアを削除 bodyElm.removeChild(copyFrom); // ボタンの色とテキストを変更 thisbutton.style.backgroundColor = "hotpink"; // 処理結果を返却 return retVal; } </script> </body> </html>

行動規範の内容に同意します