Question

我已经有一个功能，一旦点击图像就会向div添加内容;但是，我希望在第二次单击相同的图像后删除内容。有一种简单的方法可以做到这一点吗？

添加内容的功能是否还有一种方法可以显示旁边的数字字段？

以下是我用来添加内容的功能。

function frenchBread(){
      var div = document.getElementById("orderBox");

      div.innerHTML = div.innerHTML + "French Bread" + "<br>";
  }

Answer 1

指定一个变量以确定是否点击了图像。

修改

忘记分配is_clicked：）

再次编辑

在＆＃34; Frech Bread＆＃34;旁边添加了input字段。文本。

＆＃13;

var is_clicked = false;

function frenchBread(){
  
  var div = document.getElementById("orderBox");
  var curr = div.innerHTML, frenchy = 'French Bread <input type="number" name="amount"><br>';
  
  if ( is_clicked ) {
    var tmp = div.innerHTML;
    curr = tmp.replace(frenchy, "");
    div.innerHTML = curr;
    is_clicked = false;
  } else {
    div.innerHTML = curr + frenchy
    is_clicked = true;
  }

      
}

＆＃13;

<img src="" style="width: 30px; height: 30px; background: black;" onclick="frenchBread()" />
<div id="orderBox">
  An item here <br />
</div>

＆＃13;

Answer 2

你可以检查innerHTML中的内容：

function frenchBread() {
  var div = document.getElementById("orderBox");

  if(var.innerHTML == "") {
    div.innerHTML += "French Bread" + "<input type='number' /><br />";
  } else {
    div.innerHTML = "";
  }
}

使用三元运算符

编辑甚至更短，但可读性更低：

function frenchBread() {
  var div = document.getElementById("orderBox");

  div.innerHTML = if(var.innerHTML == "") ? "French Bread" + "<input type='number' /><br />" : "";
}

编辑：在两个版本中添加了数字字段。

如何使用JavaScript在div中添加和删除内容？

2 个答案:

修改

再次编辑