How to pass a value to "data-value" - javascript

I have website: http://thanglongvn.com with this in my webpage
I have a label on the same web page. I would like the "data-value" to get the value from the label value instead of hardcode value.
How to do that? How I can pass a value programmically to "data-value" and define the html mark-up as blank like this:
<div class="counter-animated" data-value="span dynamic value here"></div>
<span id="my_IDLabel">dynamic value</span>

You can access data attributes using plain javascript as element.dataset.datasetname
In this case,it is element.dataset.value,you can set it as element.dataset.value="class1"
check this snippet
window.onload = function() {
var counterClass = document.querySelectorAll('.counter-animated');
alert(counterClass[0].dataset.value);
counterClass[0].dataset.value="class1";
}
<div class="counter-animated" data-value="span dynamic value here"></div>
<span id="my_IDLabel">dynamic value</span>
Hope it helps

You can set a data attribute programatically like so
var label = document.querySelector('.value')
var target = document.querySelector('.target')
var output = document.querySelector('.output')
output.innerHTML = target.getAttribute('data-value')
document
.querySelector('button')
.addEventListener('click', function() {
target.setAttribute('data-value', label.textContent)
output.innerHTML = target.getAttribute('data-value')
})
<label class="value">Bar</label>
<div class="target" data-value="Foo"></div>
<br/>
<button>change data-value attribute</button>
<br/><br/>
The data-value attribute is:
<br/>
<div class="output"></div>

Related

How to get the innerHTML of an input in Java script

I am making a TODO list. I have difficulties with setting the input text on my card. Everything I write in the input, I want to select and to put on the card.
I tried to select the innerHTML of an input when I type something in. I don't know how to select the typed input text. I would then create a new element with the text inside, and would append it to the card.
let btn = document.querySelector('.add');
let textspace = document.querySelector('.todotext');
const input = document.querySelector('input');
// eventlistner by button clicked
btn.addEventListener('click', function() {
var txt = document.getElementsByClassName('input').innerHTML;
});
<div class="card">
<div class="todoheader">TODO List</div>
<div class="todotext"></div>
<ul class="list"></ul>
<div class="addtodo">
<buton class="add" type="button"> + </buton>
<input type="text" class="input" placeholder="add todo" />
</div>
</div>
To get the value of the input use the value property, not innerHTML. Also note that you already have a reference to the input Element in the input variable, so you don't need to use getElementsByClassName() to retrieve it - not least of all because the syntax there is flawed.
Once you have the text you can use createElement() to add a new p element to the .todotext container:
const btn = document.querySelector('.add');
const textspace = document.querySelector('.todotext');
const input = document.querySelector('input');
btn.addEventListener('click', function() {
const txt = input.value;
if (!txt)
return;
const p = document.createElement('p');
p.textContent = txt;
textspace.appendChild(p);
input.value = '';
});
<div class="card">
<div class="todoheader">TODO List</div>
<div class="todotext"></div>
<ul class="list"></ul>
<div class="addtodo">
<button class="add" type="button"> + </button>
<input type="text" class="input" placeholder="add todo" />
</div>
</div>
As others already answered your question. I just wanted to point out that there is a misspelling in your code (buton instead of button). Fix that and the button element would be rendered correctly.
First, getElementsByClassName will return HTMLCollection which is array-like, you need to use querySelector instead, also the innerHTML, textContent, innerText properties all are empty string for the input because the input is a self-closing tag without content inside, you need to use value property.
let btn = document.querySelector('.add');
let textspace = document.querySelector('.todotext');
const input = document.querySelector('input');
// eventlistner by button clicked
btn.addEventListener('click', function() {
var txt = input.value;
console.log(txt)
});
<div class="card">
<div class="todoheader">TODO List</div>
<div class="todotext"></div>
<ul class="list"></ul>
<div class="addtodo">
<buton class="add" type="button"> + </buton>
<input type="text" class="input" placeholder="add todo" />
</div>
</div>
btn.addEventListener('click', function() {
var txt = document.getElementByClassName('input').value;
});
You were using getElementByClassName which will be HTMLCollection.To loop over each element you need to convert it into an array loop over them.
var txt = document.getElementsByClassName('input').value;
You should get the value of an input , not the innerHTML
Also assign a unique id to you input fields and select them with it, it's much better :)

How can I get the source code of a specific div on radio oncheck?

I'd like to get the source code of a div, so example if a div contains some tags I'd like to get them as they are in html format and update it on a textfield.
JsFiddle : https://jsfiddle.net/Lindow/g1sp1ms3/2/
HTML :
<form>
<label class="tp_box_1">
<input type="radio" name="selected_layout" class="selected_layout" value="layout_1">
<div class="box_1">
<h3>box_one</h3>
<p>1</p>
</div>
</label>
<br><hr><br>
<label class="tp_box_2">
<input type="radio" name="selected_layout" class="selected_layout" value="layout_2">
<div class="box_2">
<h3>box_two</h3>
<p>2</p>
</div>
</label>
<textarea id="mytextarea"></textarea>
<input id="submit_form" type="button" value="Send">
</form>
JavaScript :
$('input[type="radio"][name="selected_layout"]').change(function() {
if(this.checked) {
// get the specific div children of $this
var selected_layout = $(this).find('.selected_layout');
// get source code of what's inside the selected_layout
/* example :
<h3>box_two</h3>
<p>2</p>
and put it in someVariable.
*/
// and put in into textarea (all this need to happens when a radio is changed with the source code of the checked div)
var someVariable = ...
$('textarea').val(someVariable);
}
});
How can I achieve this ? How can I get the source code inside a specific div ?
First, you don't want selected_layout to be equal to: $(this).find('.selected_layout') because this already points to that element. You want it to point to the next element that comes after it.
I think this is what you are looking for:
$('input[type="radio"][name="selected_layout"]').change(function() {
if(this.checked) {
// get the index within the set of radio buttons for the radio button that was clicked
var idx = $("[type=radio][class=selected_layout]").index(this);
// Get the div structure that corresponds to the same index
var test = $("[class^='box_']")[idx];
// Now, just make that the value of the textarea
$('textarea').val(test.innerHTML);
}
});
textarea { width:100%; height:75px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<label class="tp_box_1">
<input type="radio" name="selected_layout" id="sl1" class="selected_layout" value="layout_1">
<div class="box_1">
<h3>box_one</h3>
<p>1</p>
</div>
</label>
<label class="tp_box_2">
<input type="radio" name="selected_layout" id="sl2" class="selected_layout" value="layout_2">
<div class="box_2">
<h3>box_two</h3>
<p>2</p>
</div>
</label>
<textarea id="mytextarea"></textarea>
<input id="submit_form" type="button" value="Send">
</form>
Create div element with:
Template inside
class or id for identifying
Set inputs' value to desired template class/id, then on input change find the template element base on input's value and extract the innerHTML of it by using jQuery's .html() method. Then put this HTML as an new value of textarea using also the.html() method on textarea element.
HTML:
<div id="template1" style="display:none;">
<h1>Hi!</h1>
</div>
<input type="radio" onchange="findTemplate(event)" value="template1" />
<textarea class="texta"></textarea>
jQuery:
var findTemplate = function(event) {
var target = $(event.target);
var templateName = target.val();
var template = $("#"+templateName);
var template = template.html();
var textarea = $(".texta");
textarea.html(template);
};
Working fiddle: https://jsfiddle.net/rsvvx6da/1/

HTML template - assigning html data

I am using HTML for the first time in combination with an AJAX call. Is it possible assign html data to a div using JavaScript?
I have the following:
<template class="template result student">
<div class="result student" data-category="student">
<div class="box name">
<span class="name">John Smith</span>
<br />
<span class="category">Student</span>
</div>
</div>
</template>
And JS
const studentTemplate =
document.querySelector(".template.result.student"),
category = studentTemplate.dataset.querySelector(".result.student"),
studentName = studentTemplate.content.querySelector(".box.name .name"),
date = studentTemplate.content.querySelector(".box.dob .date");
category.textContent = "student";
studentName.textContent = "student name";
So as you can see I am trying to set date-student in the template via JS. But I get
studentTemplate.dataset.querySelector is not a function
Question is, what is correct way of doing this? Setting the content works fine
You need to use the content property to access content of the template.
The dataset property is for accessing data- html attributes and would be followed with the name of the attribute, as in dataset.category. As the error states, querySelector() is not a valid method on the data object returned from the dataset property.
const studentTemplate = document.querySelector(".template.result.student");
var category = studentTemplate.content.querySelector(".result.student");
var studentName = studentTemplate.content.querySelector(".box.name .name")
var dte = studentTemplate.content.querySelector(".box.dob .date");
// Modify the text content of the elements
category.textContent = "teacher";
studentName.textContent = "teacher name";
// Modify the data-category attribute value of the the div
category.dataset.category = "teacher";
console.log(category);
<template class="template result student">
<div class="result student" data-category="student">
<div class="box name">
<span class="name">John Smith</span>
<br />
<span class="category">Student</span>
</div>
</div>
</template>

Change the value of xforms element via javascript?

I was wondering if it's possible to change the value of an xforms element via javascript and then submit the form with that value?
what i have tried is change the text of an xforms:input when an <input type="file"> is triggered and it works, the thing is that when i submit the form, the xforms:input doesn't seem to apply the value
<div id="ubi" class="controls">
<xf:input ref="ubicacion"/>
<input class="input-file" id="fileadjunto" type="file" onchange="uploadfile()"/>
</div>
<script>
function uploadfile()
{{
var inp = document.getElementById('fileadjunto');
var name = inp.files.item(0).name;
var span1 = document.getElementById('ubi').getElementsByTagName('span')[0].getElementsByTagName('span')[0].getElementsByTagName('input')[0];
span1.value = name;
}};
</script>
why am i getting the spans and inputs? if you check the xforms:input element in the console you'll see that it's converted to
<span .....>
<span.....>
<input..../>
</span>
</span>

get html element value under another html tag

how can i get that label tag input type="text" value?
This is not my code and the structure can't be altered
<div id="test">
<label class="control input text">
<span class="wrap">startdate</span>
<input type="text">
<span class="warning"></span>
</label>
</div>
Assuming you don't need to support anything below IE8, you can use document.querySelector to select that specific input element and then get its value via its .value property:
var value = document.querySelector('#test label.control input').value;
Just like that
var value = document.querySelector('#test .control input').value;
you can do that in jQuery
var html = $('#test lable').html();

Categories