Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
    <div id = "inputs">
        <p>
            Dato 1: <input type = "text" /> <button>+</button>
        </p>
        <p>
            Dato 2: <input type = "text" /> <button>+</button>
        </p>
        <p>
            Dato 3: <input type = "text" /> <button>+</button>
        </p>
    </div>
    <div id = "output"></div>
</body>
</html>
 
p{
    margin: 0;
}
​
#output{
    border: .1rem gray solid;
    margin-top: 1%;
    background: whitesmoke;
    width: 40%;
}
 
var botones = document.querySelectorAll("#inputs button"),
    salida = document.querySelector("#output");
​
[].forEach.call(botones, function(boton){
    boton.addEventListener("click", function(){
        var input = this.previousElementSibling;
        salida.innerHTML += "Valor agregado: " + input.value + "<br />";
        input.disabled = true;
        this.disabled = true;
    }, false);
});
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
Alexis88pro
0viewers