-1

I have a html like the below,

<div id ="b1">
     <div class = "test1"  value = 100> </div>
</div>

I need the Value 100 to be displayed in the HTML inside the particular div.

I used the below JS code,

Var target = document.getElementById('b1');
var test = target.getElementsByClassName('test');
$(test).innerHTML = $(this).attr('value');

It didnt work.

Could someone please help? Many thanks.

Dar
  • 27
  • 5
  • Take a good look at what you're selecting in JS and what you entered in the class attribute. I suggest you open up the browser console (usually by pressing F12 in your browser) when your code isn't working. It displays errors in your code that can give you a hint to what's wrong. – icecub Aug 26 '21 at 14:52
  • Does this answer your question? [How to get element by class name?](https://stackoverflow.com/questions/17965956/how-to-get-element-by-class-name) – Alexandre Elshobokshy Aug 26 '21 at 14:52
  • 3
    Why are you using both vanilla JS _and_ jQuery in this way? It makes no sense. jQuery objects don't have `innerHTML` properties. Also `getElementsByClassName` returns a live nodelist, so you need to iterate over that. And what is `this` in this example? – Andy Aug 26 '21 at 14:55
  • `$(".test1").html(() => $(this).attr("value"));` ? – miken32 Aug 26 '21 at 15:48
  • @miken32 This won't work, since the keyword `this` refers to the parent object in arrow functions, you'll need to use a regular syntax anonymous function (`function(){}`) to be able to use `this` keyword. – Abd Elbeltaji Aug 26 '21 at 17:34
  • 1
    @AbdElbeltaji good to know; I didn't test it out, just seemed like an obvious one-liner. I'll revise to `$(".test1").html(function() {$(this).attr("value")});` – miken32 Aug 26 '21 at 17:40

3 Answers3

3

The value attribute isn't available on a <div>

Use .innerHTML to change the value of the div
HTML/Javascript change div content

Also, you can use getElementsByClassName on the document itself, no need to get the parent <div> first

Since you're only expecting 1 result, well need to select the first index of the nodelist returned by getElementsByClassName
Javascript: How to get only one element by class name?

var test = document.getElementsByClassName('test1')[0];
test.innerHTML = 100;
<div id="b1">
     <div class="test1"></div>
</div>
0stone0
  • 34,288
  • 4
  • 39
  • 64
  • Glad you've got it sorted out @Dar! If somebody [answers your question](https://stackoverflow.com/help/someone-answers), please consider [upvoting](https://meta.stackexchange.com/questions/173399/how-can-i-upvote-answers-and-comments) or [accepting](https://meta.stackexchange.com/q/5234/179419) the answer. This indicates to the wider community that you've found a solution and gives some reputation to both the answerer and yourself.| – 0stone0 Aug 26 '21 at 15:05
  • @OstoneO and Spectric, instead of value can we add
    . is it possible to get the value?     – Dar Aug 26 '21 at 15:22
  • You'll need to ask an other question about that, not sure what you're trying to achieve. – 0stone0 Aug 26 '21 at 15:24
  • 1
    @Dar No, don't such custom attributes, if you want to use custom attributes you must start its name with `data-` see: https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes, I also showed it in my answer below: https://stackoverflow.com/a/68940898/16618307. – Abd Elbeltaji Aug 26 '21 at 15:26
0

var test= document.getElementById('b2');

test.innerHTML=test.getAttribute("value")
   <div id ="b1">
         <div class = "test1" id ="b2"  value="100" > </div>
    </div>
Abbas
  • 9
  • 6
  • Please provide additional details in your answer. As it's currently written, it's hard to understand your solution. – Community Aug 26 '21 at 15:21
-1

You have entered the wrong className, and you cannot use this because it refers to the parent object in this case (window object) you also cannot add a data attribute to a div, you can use a special dataset attribute data-value:

<div id="b1">
  <div class="test1" data-value="100"> </div>
</div>

var target = document.getElementById('b1');
var test = target.getElementsByClassName('test1')[0];
test.innerHTML = test.dataset.value;
Abd Elbeltaji
  • 473
  • 2
  • 13
  • I used the same as you mentioned,
    , to access the value I used, var test = target.getElementsByClassName('test1')[0]; test.innerHTML = test.dataset.value; But, It shows dataset undefined.     – Dar Aug 26 '21 at 16:03
  • @Dar I'm not sure what is wrong! here is a jsFiddle Example: https://jsfiddle.net/4ty8u1pz/ – Abd Elbeltaji Aug 26 '21 at 16:21