Question

我想问一下如何通过单击按钮，然后用id="ff"单击按钮来删除输入数字。这是代码，当我运行它时，按钮出现了，但是没有键入，只是按钮ff是“打开”的。当我单击它时，有空的输入，不能正常工作。

var screen = document.getElementById('tt');
var p = screen.InnerHTML;
var btn = document.getElementsByTagName('button');

if (p == '') {
  ff.style.display = 'none';
}

for (var i = 0; i < btn.length; i++) {
  btn[i].addEventListener('click', function() {
    p += this.InnerHTML;
    if (p !== '') {
      ff.style.display = 'inline-block';
    }
  })
}

var z = document.getElementById('ff');
z.onclick = function() {
  p = p.substring(0, p.length - 1);
}

* {
  padding: 0;
  margin: 0 auto;
  text-decoration: none;
  list-style: none;
}

.phone {
  width: 220px;
  height: 220px;
  margin-top: 10px;
  border: 1px solid grey;
}

.screen {
  width: 200px;
  height: 60px;
  background: white
}

#tt {
  font-size: 2em;
  width: 100%;
  padding-bottom: 20px;
}

#ff {
  padding: 1%;
  display: none;
}

.buttons>div {
  margin-bottom: 10px;
  display: flex;
}

.buttons>div>button {
  width: 25px;
  height: 25px;
}

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="style.css">
  <meta charset="utf-8">
  <title>Test</title>
</head>
<body>
  <div class="phone">
    <div class="screen">
      <input type="text" id="tt">
      <input type="button" id="ff">
    </div>
    <div id="buttons" class="buttons">
      <div>
        <button>1</button>
        <button>2</button>
        <button>3</button>
      </div>
      <div>
        <button>4</button>
        <button>5</button>
        <button>6</button>
      </div>
      <div>
        <button>7</button>
        <button>8</button>
        <button>9</button>
      </div>
      <div>
        <button>*</button>
        <button>0</button>
        <button>#</button>
      </div>
    </div>
  </div>
  <script type="text/javascript" src="script.js">
  </script>
</body>
</html>

Answer 1

正如Pointy在评论中所说，它是innerHTML，而不是InnerHTML。

您不能对innerHTML标签使用input；您只能使用value（但是，对于button标签，您可以使用innerHTML）。

更改

var p = screen.InnerHTML;

收件人

var p = screen.value;

您每次都更改全局变量p的值，而不是screen.value，这实际上会更改要显示的元素的value。

更改

p += this.InnerHTML;
if (p !== '') {
  ff.style.display = 'inline-block';
}

收件人

screen.value += this.InnerHTML;
if (screen.value !== '') {
  ff.style.display = 'inline-block';
}

* {
  padding: 0;
  margin: 0 auto;
  text-decoration: none;
  list-style: none;
}

.phone {
  width: 220px;
  height: 220px;
  margin-top: 10px;
  border: 1px solid grey;
}

.screen {
  width: 200px;
  height: 60px;
  background: white
}

#tt {
  font-size: 2em;
  width: 100%;
  padding-bottom: 20px;
}

#ff {
  padding: 1%;
  display: none;
}

.buttons>div {
  margin-bottom: 10px;
  display: flex;
}

.buttons>div>button {
  width: 25px;
  height: 25px;
}

<body>
  <div class="phone">
    <div class="screen">
      <input type="text" id="tt">
      <input type="button" id="ff">
    </div>
    <div id="buttons" class="buttons">
      <div>
        <button>1</button>
        <button>2</button>
        <button>3</button>
      </div>
      <div>
        <button>4</button>
        <button>5</button>
        <button>6</button>
      </div>
      <div>
        <button>7</button>
        <button>8</button>
        <button>9</button>
      </div>
      <div>
        <button>*</button>
        <button>0</button>
        <button>#</button>
      </div>
    </div>
  </div>
  <script>
    var screen = document.getElementById('tt');
    var p = screen.value;
    var btn = document.getElementsByTagName('button');
    if (p == '') {
      ff.style.display = 'none';
    }
    for (var i = 0; i < btn.length; i++) {
      btn[i].addEventListener('click', function() {
        screen.value += this.innerHTML;
        if (screen.value !== '') {
          ff.style.display = 'inline-block';
        }
      })
    }
    var z = document.getElementById('ff');
    z.onclick = function() {
      screen.value = p.substring(0, p.length - 1);
    }
  </script>
</body>

Answer 2

我做了以下更正：

InnerHTML不正确。我替换为innerHTML，这是正确的格式。
将var p替换为screen.value，以便在每次调用var时获得真实值。

现在它应该如何工作了：

var screen = document.getElementById('tt');
var btn = document.getElementsByTagName('button');
if (screen.value == '') {
	ff.style.display = 'none';
}
for (var i = 0; i < btn.length; i++) {
	btn[i].addEventListener('click', function(){
		screen.value += this.innerHTML;
		if (screen.value !== '') {
			ff.style.display = 'inline-block';
		}
	});
}
var z = document.getElementById('ff');
z.addEventListener('click', function(){
	screen.value = screen.value.substring(0, screen.value.length - 1);
});

*{
	padding: 0;
	margin: 0 auto;
	text-decoration: none;
	list-style: none;  
}
.phone{
	width: 220px;
	height: 220px;
	margin-top: 10px;
	border: 1px solid grey;
}
.screen{
	width: 200px;
	height: 60px;
	background: white
}
#tt{
	font-size: 2em; 
	width: 100%;
	padding-bottom: 20px;
}
#ff{
	padding: 1%;
	display: none;
}
.buttons>div{
	margin-bottom: 10px;
	display: flex;
}
.buttons>div>button{
	width: 25px;
	height: 25px;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css"> 
	<meta charset="utf-8">
	<title>Test</title>
</head>
<body>
	<div class="phone">
		<div class="screen">
			<input type="text" id="tt">
			<input type="button" id="ff">
		</div>

		<div id="buttons" class="buttons">
			<div>
				<button>1</button>
				<button>2</button>
				<button>3</button>
			</div>
			<div>
				<button>4</button>
				<button>5</button>
				<button>6</button>
			</div>
			<div>
				<button>7</button>
				<button>8</button>
				<button>9</button>
			</div>
			<div>
				<button>*</button>
				<button>0</button>
				<button>#</button>
			</div>
		</div>
	</div>

<script type="text/javascript" src="script.js">


</script>
</body>
</html>

我的JS怎么了？

2 个答案: