如何使用用户输入动态传递数据集属性？

Question

I have a text input box where a user inputs what data-* they want to look for in the DOM. I get this user input on a button click then do a little bit of parsing. How would I get the value of the entered text to be the final part of the HTMLElement.dataset selector?

//HTML for text input
<div class="form-group">
  <label for="specificSelector">Specific Selector</label>
  <input type="text" class="form-control" id="specificSelector" placeholder="Enter the specific selector here">
</div>
<p id="a"></p>

//JavaScript
var specificSelector = document.getElementById("specificSelector").value;
var a = document.getElementById("a"); // Test element
var parsedSelector = specificSelector.match(/data-(.*)/)[1];
console.log("Parsed selector: ", parsedSelector);

//I need to pass the value of the parsedSelector to the below line
var aData = a.dataset.parsedSelector;
console.log("aData: ", aData);

I have read this from MDN Developers but can't figure it out. It looks like you have to pass the data attribute in camel case but might not be able to do it via a variable?

Thanks in advance.

Answer 1

When you need to access an object property via a variable, you need to use array-bracket syntax.

In the example below, type "data-test" into the text box and then hit TAB .

 // Get a reference to the input var specificSelector = document.getElementById("specificSelector"); var a = document.getElementById("a"); // Test element // Set up an event handler for when the data is changed and the // input loses focus specificSelector.addEventListener("change", function(){ // Extract the custom name portion of the data- attribute var parsedSelector = specificSelector.value.match(/data-(.*)/)[1]; console.log("Parsed selector: ", parsedSelector); // Pass the string (stored in the variable) into the dataset object // of another element to look up the object key. var aData = a.dataset[parsedSelector]; console.log("aData: ", aData); }); 

 <div class="form-group"> <label for="specificSelector">Specific Selector</label> <input type="text" class="form-control" id="specificSelector" placeholder="Enter the specific selector here"> </div> <div id="a" data-test="test2"></div>