以javascript形式调用文本或txt文件

Recalling text or a txt file in a javascript form

本文关键字：txt 文件 文本 调用 javascript      更新时间：2023-09-26

我正在尝试创建一个基于所做选择显示文本的表单。理想情况下，我将能够从一个txt文件中读取，但只是文本工作得很好。我做错了什么?我想我的返回值只是在给我提供选择列表。

<!DOCTYPE html>
<html lang=eng> 
    <head>
        <meta charset=utf-8>
            <link rel="stylesheet" type="text/css"
      href="https://fonts.googleapis.com/css?family=Slabo+27px">
        <link href="normal.css" rel="stylesheet" type="text/css" />
        <title>CLIO</title>
         <style>
.ex
 {
  margin:auto;
  width:100%;
  padding:10px;
  font-family: 'Slabo 27px', serif;
 }
 select
 {
  display:inline;
  cursor:pointer;
  font-family: 'Slabo 27px', serif;
 } 
form{
    display:inline-block;
    width: 475px;
    font-family: 'Slabo 27px', serif;
}
</style>
    </head>
        <body>
            <div id="wrap">
                <header id="header">
                    <div class="container">
                        <h1>Chrysostomus Latinus in Iohannem Online (CLIO)</h1>
                        <nav id="nav">
                            <ul>
                                <li><a href="index.html">HOME</a></li>
                                <li><a href="about.html">ABOUT</a></li>
                                <li><a href="transcriptions.html">TRANSCRIPTIONS</a></li>
                                <li><a href="contact.html">CONTACT</a></li>
                                <li><a href="login.html">LOGIN</a></li>
                            </ul>
                        </nav>
                    </div>
                </header>
                <div id="page">
                    <div class="content">
                                <div class="ex">
  <form action="#" method="post" class="demoForm">
    <fieldset>
      <legend>Select Translation</legend>
      <p>
        <select id="scripts" name="scripts">
          <option value="scroll">Orignal Greek</option>
          <option value="tooltip">Original Latin</option>
          <option value="con_scroll">English Translation</option>
        </select>
        <br>
        <div class="inline">
          <p>
            <input type="button" id="showVal" value="Select" />
          </p>
          <span id="display"></span>
        </div>
    </fieldset>
  </form>
  <form action="#" method="post" class="demoForm">
    <fieldset>
      <legend>Select Translation</legend>
      <p>
        <select id="scripts" name="scripts">
          <option value="scroll">Orignal Greek</option>
          <option value="tooltip">Original Latin</option>
          <option value="con_scroll">English Translation</option>
        </select>
        <div class="inline">
          <p>
            <input type="button" id="showVal" value="Select" />
          </p>
          <span id="display"></span>
        </div>
    </fieldset>
  </form>
  <form action="#" method="post" class="demoForm">
    <fieldset>
      <legend>Select Translation</legend>
      <p>
        <select id="scripts" name="scripts">
          <option value="scroll">Orignal Greek</option>
          <option value="tooltip">Original Latin</option>
          <option value="con_scroll">English Translation</option>
        </select>
        <br>
        <div class="inline">
          <p>
            <input type="button" id="showVal" value="Select" />
          </p>
          <span id="display"></span>
        </div>
    </fieldset>
  </form>
</div>
                </div>
                </div>
            </div>
        </body>
<script>
    <script>
    (function() {
        [].forEach.call(document.querySelectorAll(".demoForm"), function(element) {
      element.querySelector("#showVal").addEventListener("click", function(event) {
        var dropdown = element.querySelector("#scripts");
        var value = dropdown.options[dropdown.selectedIndex].text;
        element.querySelector("#display").innerHTML = value;
      })
    });
        // get references to select list and display text box
        var sel = document.getElementById('scripts');
        var el = document.getElementById('display');
        function getSelectedOption(sel) {
            var opt;
            for ( var i = 0, len = sel.options.length; i < len; i++ ) {
                opt = sel.options[i];
                if ( opt.selected === true ) {
                    break;
                }
            }
            return opt;
        }
        // assign onclick handlers to the buttons
        document.getElementById('showVal').onclick = function () {
            el.value = sel.value;    
        }
        document.getElementById('showTxt').onclick = function () {
            // access text property of selected option
            el.value = sel.options[sel.selectedIndex].text;
        }
        document.getElementById('doLoop').onclick = function () {
            var opt = getSelectedOption(sel);
            el.value = opt.value;
        }
    }());
    // immediate function to preserve global namespace
    </script>

这里有两个错误

  • 控制台抛出的第一个错误:

    SyntaxError: expected expression, got '<'

    你有<script>在脚本标签

  • 下面的代码部分是为showTxt和doLoop添加点击处理程序。这些html容器不存在于你的html代码中，因此会出现错误在控制台 
       document.getElementById('showTxt').onclick = function() {
     // access text property of selected option
     el.value = sel.options[sel.selectedIndex].text;
   }
   document.getElementById('doLoop').onclick = function() {
     var opt = getSelectedOption(sel);
     el.value = opt.value;
  }

    考虑到以上……然后改正……一切都很好!

    参见下面的代码片段

    <!DOCTYPE html>
<html lang=eng>
<head>
  <meta charset=utf-8>
  <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Slabo+27px">
  <link href="normal.css" rel="stylesheet" type="text/css" />
  <title>CLIO</title>
  <style>
    .ex {
      margin: auto;
      width: 100%;
      padding: 10px;
      font-family: 'Slabo 27px', serif;
    }
    select {
      display: inline;
      cursor: pointer;
      font-family: 'Slabo 27px', serif;
    }
    form {
      display: inline-block;
      width: 475px;
      font-family: 'Slabo 27px', serif;
    }
  </style>
</head>
<body>
  <div id="wrap">
    <header id="header">
      <div class="container">
        <h1>Chrysostomus Latinus in Iohannem Online (CLIO)</h1>
        <nav id="nav">
          <ul>
            <li><a href="index.html">HOME</a>
            </li>
            <li><a href="about.html">ABOUT</a>
            </li>
            <li><a href="transcriptions.html">TRANSCRIPTIONS</a>
            </li>
            <li><a href="contact.html">CONTACT</a>
            </li>
            <li><a href="login.html">LOGIN</a>
            </li>
          </ul>
        </nav>
      </div>
    </header>
    <div id="page">
      <div class="content">
        <div class="ex">
          <form action="#" method="post" class="demoForm">
            <fieldset>
              <legend>Select Translation</legend>
              <p>
                <select id="scripts" name="scripts">
                  <option value="scroll">Orignal Greek</option>
                  <option value="tooltip">Original Latin</option>
                  <option value="con_scroll">English Translation</option>
                </select>
                <br>
                <div class="inline">
                  <p>
                    <input type="button" id="showVal" value="Select" />
                  </p>
                  <span id="display"></span>
                </div>
            </fieldset>
          </form>
          <form action="#" method="post" class="demoForm">
            <fieldset>
              <legend>Select Translation</legend>
              <p>
                <select id="scripts" name="scripts">
                  <option value="scroll">Orignal Greek</option>
                  <option value="tooltip">Original Latin</option>
                  <option value="con_scroll">English Translation</option>
                </select>
                <div class="inline">
                  <p>
                    <input type="button" id="showVal" value="Select" />
                  </p>
                  <span id="display"></span>
                </div>
            </fieldset>
          </form>
          <form action="#" method="post" class="demoForm">
            <fieldset>
              <legend>Select Translation</legend>
              <p>
                <select id="scripts" name="scripts">
                  <option value="scroll">Orignal Greek</option>
                  <option value="tooltip">Original Latin</option>
                  <option value="con_scroll">English Translation</option>
                </select>
                <br>
                <div class="inline">
                  <p>
                    <input type="button" id="showVal" value="Select" />
                  </p>
                  <span id="display"></span>
                </div>
            </fieldset>
          </form>
        </div>
      </div>
    </div>
  </div>
</body>
<script>
  (function() {
    [].forEach.call(document.querySelectorAll(".demoForm"), function(element) {
      element.querySelector("#showVal").addEventListener("click", function(event) {
        var dropdown = element.querySelector("#scripts");
        var value = dropdown.options[dropdown.selectedIndex].text;
        element.querySelector("#display").innerHTML = value;
      })
    });
    // get references to select list and display text box
    var sel = document.getElementById('scripts');
    var el = document.getElementById('display');
    function getSelectedOption(sel) {
      var opt;
      for (var i = 0, len = sel.options.length; i < len; i++) {
        opt = sel.options[i];
        if (opt.selected === true) {
          break;
        }
      }
      return opt;
    }
    // assign onclick handlers to the buttons
    document.getElementById('showVal').onclick = function() {
      el.value = sel.value;
    }
    // document.getElementById('showTxt').onclick = function() {
    //   // access text property of selected option
    //   el.value = sel.options[sel.selectedIndex].text;
    // }
    // document.getElementById('doLoop').onclick = function() {
    //   var opt = getSelectedOption(sel);
    //   el.value = opt.value;
    // }
  }());
  // immediate function to preserve global namespace
</script>

    • 相关文章：