I can not get the text with javascript and vue.js, send it to me null

Question

I can not get the text with javascript and vue.js, send it to me null

Navigation

#1 by (0 votes)
#2 by (0 votes)

0

I am trying to get the text of the span tag with javascript, but the sending of the data remains in null. This is how I have the code:

html:

  <div class="col-lg-10 ">
    <span id="trunc">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>
  </div>

javascript:

var lengthText = 90;
//Aqui en la variable text guardas el texto antes de ocultarlo
var text = $("#trunc").text();
var shortText = $.trim(text).substring(0, lengthText).split(" ").slice(0, -1).join(" ") + "...";
console.log(text);
console.log(shortText);

This is the image of how you send the information in the console:

I will be grateful if you can help me with this situation.

javascript html vue.js

asked by JULIO MACHAN 10.10.2017 в 20:10

source

2 answers

Communication between asp website and on vb.net Compare and Order 2 Json files

score 0 · Answer 1

0

I think your problem may be in the inclusion of jquery in your document. By using your code in jsfiddle , this works without problem.

answered by 10.10.2017 в 20:18

score 0 · Answer 2

Just missing the Jquery library

var lengthText = 90;
//Aqui en la variable text guardas el texto antes de ocultarlo
var text = $("#trunc").text();
var shortText = $.trim(text).substring(0, lengthText).split(" ").slice(0, -1).join(" ") + "...";
console.log(text);
console.log(shortText);

<script src="https://momentjs.com/downloads/moment.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.runtime.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>



<div class="col-lg-10 ">
  <span id="trunc">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>
</div>