前端做几个按钮，点击按钮时，按钮的值可以动态加到input后面

可以通过JavaScript来实现这个功能。首先，需要给按钮添加点击事件监听器，然后在监听器中获取按钮的文本值，然后将它添加到input元素的value属性后面即可。下面是一个示例代码：

HTML部分：

<input type="text" id="input">
<button id="btn1">按钮1</button>
<button id="btn2">按钮2</button>

JavaScript部分：

var btn1 = document.getElementById("btn1");
var btn2 = document.getElementById("btn2");
var input = document.getElementById("input");

btn1.addEventListener("click", function() {
    input.value += btn1.innerText;
});

btn2.addEventListener("click", function() {
    input.value += btn2.innerText;
});

这样，当点击按钮1或按钮2时，它们的文本值将会动态添加到input元素的value属性后面。

相关问题

前端做几个按钮，点击按钮时，按钮的值可以动态加到input后面用elment组件

好的，我可以给你一些思路，你可以根据自己的实际情况进行调整。

首先，你可以使用 `el-button` 组件来创建按钮，然后在按钮上添加 `@click` 事件，将按钮的值动态添加到对应的 `el-input` 组件中。

举个例子，假设你有两个按钮：一个是 "Hello"，另一个是 "World"，你想在点击这两个按钮时，将它们的值添加到一个 `el-input` 组件中。

那么你可以这样做：

<template>
  <div>
    <el-input v-model="inputValue"></el-input>
    <el-button @click="addText('Hello')">Hello</el-button>
    <el-button @click="addText('World')">World</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputValue: '',
    };
  },
  methods: {
    addText(text) {
      this.inputValue += text;
    },
  },
};
</script>

在上面的代码中，我们首先创建了一个 `el-input` 组件，并将它的值绑定到了 `inputValue` 变量上。然后我们创建了两个按钮，分别是 "Hello" 和 "World"，并在它们上面添加了 `@click` 事件，当点击按钮时，会触发 `addText` 方法，将按钮的值动态添加到 `inputValue` 变量中。

最后，你可以根据自己的实际情况进行调整，比如修改按钮的样式、修改输入框的默认值等。

前端vue需求，做几个ribbon，点击那个ribbon，然后ribbon的值进入input中,ribbon可以多选

好的，你需要做几个ribbon按钮，当点击其中一个ribbon按钮时，该ribbon的值会进入input输入框中，同时，可以支持多选。那么，我理解的需求是：

1. 需要做出多个ribbon按钮；
2. 点击其中一个ribbon按钮，该ribbon的值会进入input输入框中；
3. 支持多选。

如果我有误解你的需求，请告诉我。

接下来是我的建议：

1. 首先，你需要用Vue框架来实现这个需求，因为Vue是一个非常好的前端框架，可以很好地实现这个需求；
2. 你可以自定义一个ribbon的组件，然后在这个组件中绑定一个点击事件，当点击该组件时，获取该组件的值，并将该值添加到一个数组中；
3. 在Vue组件中，你可以使用v-model指令来绑定数据，这样当你修改input输入框的值时，会自动更新组件的值；
4. 为了支持多选，你需要在点击事件中判断该ribbon是否已经被选中，如果已经被选中，则从数组中移除该值；否则，将该值添加到数组中。

代码示例：

<template>
  <div>
    <ribbon @click="handleClick('ribbon1')">Ribbon 1</ribbon>
    <ribbon @click="handleClick('ribbon2')">Ribbon 2</ribbon>
    <ribbon @click="handleClick('ribbon3')">Ribbon 3</ribbon>
    <input v-model="selectedRibbon">
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedRibbons: [],
      selectedRibbon: ''
    }
  },
  methods: {
    handleClick(value) {
      const index = this.selectedRibbons.indexOf(value)
      if (index === -1) {
        this.selectedRibbons.push(value)
      } else {
        this.selectedRibbons.splice(index, 1)
      }
      this.selectedRibbon = this.selectedRibbons.join(',')
    }
  }
}
</script>

在上面的代码中，我们定义了一个ribbon组件，当点击该组件时，会调用handleClick方法，并将该组件的值添加或移除到selectedRibbons数组中。在handleClick方法中，我们通过indexOf方法来判断该ribbon是否已经被选中，如果已经被选中，则从数组中移除该值；否则，将该值添加到数组中。最后，我们将selectedRibbons数组中的值用逗号拼接起来，赋给了selectedRibbon，这样就可以实现需求了。