Question

所以我为自己做了一些小型文件阅读器，但是问题是我不能多次在输入字段中写任何文本。我正在使用电子框架，但我认为这并不重要。当然，在浏览器版本中，它将无法正常工作，您可以在其中编写任何内容。

我试图更改 let输入的位置，让其单击，然后将它们写入函数，但仍然无法正常工作。我在另一个项目中做了相同的示例，并且可以正常工作，但是在HTML中具有另一个样式和ID。而且我认为这里的问题出在javascript中。

所以这是一些代码，在我看来，有趣的部分是主要信息。

var mini = true;


function toggleSidebar() {
  if (mini) {
    console.log("opening sidebar");
    document.getElementById("mySidebar").style.width = "250px";
    document.getElementById("main").style.marginLeft = "250px";
    this.mini = false;
  } else {
    console.log("closing sidebar");
    document.getElementById("mySidebar").style.width = "85px";
    document.getElementById("main").style.marginLeft = "85px";
    this.mini = true;
  }
}
//INTERESTING PART
let click = document.getElementById('readme');
let fs = require('fs');


click.onclick = function() {
  let input = document.getElementById('input');
  let value = input.value;
  fs.readFile('test/'+value+'.txt', 'utf8', function(err, contents) {
    alert(contents);
  });
}

body {
  font-family: "Lato", sans-serif;
}

.sidebar {
  height: 100%;
  width: 85px;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
  white-space: nowrap;
}

.sidebar a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

.sidebar a:hover {
  color: #f1f1f1;
}

.sidebar .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

.material-icons,
.icon-text {
  vertical-align: middle;
}

.material-icons {
  padding-bottom: 3px;
}

#main {
  transition: margin-left .5s;
  padding: 16px;
  margin-left: 100px;
}
/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */

@media screen and (max-height: 450px) {
  .sidebar {
    padding-top: 15px;
  }
  .sidebar a {
    font-size: 18px;
  }
}

#input {
  width: 50%;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  
  <!-- Bootstrap CSS CDN -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
  <!-- Our Custom CSS -->
  <link rel="stylesheet" href="style.css">
  
  <!-- Font Awesome JS -->
  <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/solid.js" integrity="sha384-tzzSw1/Vo+0N5UhStP3bvwWPq+uvzCMfrN1fEFe+xBmv1C/AtVX5K0uZtmcHitFZ" crossorigin="anonymous"></script>
  <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/fontawesome.js" integrity="sha384-6OIrr52G08NpOFSZdxxz1xdNSndlD4vdcf/q2myIUVO0VsqaGHJsB0RaBE01VTOY" crossorigin="anonymous"></script>
  
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  
  
  <title>Document</title>
</head>
<body>
  
  <div id="mySidebar" class="sidebar" onmouseover="toggleSidebar()" onmouseout="toggleSidebar()">
    <a href="#"><span><i class="material-icons">info</i><span class="icon-text">&nbsp;&nbsp;&nbsp;&nbsp;about</span></a><br>
    <a href="#"><i class="material-icons">spa</i><span class="icon-text"></span>&nbsp;&nbsp;&nbsp;&nbsp;services</a></span>
  </a><br>
  <a href="#"><i class="material-icons">monetization_on</i><span class="icon-text"></span>&nbsp;&nbsp;&nbsp;&nbsp;clients</span></a><br>
  <a href="#"><i class="material-icons">email</i><span class="icon-text"></span>&nbsp;&nbsp;&nbsp;&nbsp;contact<span></a>
  </div>

  <!--INTERESTING PART-->
  <div id="main">
    <h2>Read the file example.txt</h2>
    <div class="input-group mb-3">
      <input id="input" type="text" class="form-control" placeholder="Enter a path" aria-label="Recipient's username" aria-describedby="basic-addon2">
      <div class="input-group-append">
        <input id="readme" type="button" class="btn btn-outline-secondary" value="Read file!">
      </div>
    </div>
  </div>
  <!-- Our Script -->
  <script type="text/javascript" src="index.js"></script>
</body>
</html>

如果您能帮助我，我将非常高兴。谢谢！

为什么我不能第二次在输入字段上写文本？

0 个答案: