Return to Question

document.addEventListener("DOMContentLoaded", function() {
 'use strict';
 function words(text) {
 return text
 .replace(/[-'.]/ig, "") // Ignores hyphens and apostrophes. Dots are here to avoid split on . in numbers.
 .split(/[^a-zA-ZæøåÆØÅ0-9]/g) // Can't use \W+ since I need to take into account danish character ÆØÅ
 .filter(Boolean);
 }
 function sentences(text) {
 var splitter = /\?|\!|\.|\n/g;
 var arrayOfSentences = text
 .split(splitter)
 .filter(Boolean);
 return arrayOfSentences;
 }
 function calculateLix(text) {
 var wordCount = words(text).length;
 var longWordsCount = words(text)
 .filter(function(wordsArray) {
 return wordsArray.length > 6;
 })
 .length;
 var sentenceCount = sentences(text).length;
 var lixScore = Math.round((wordCount / sentenceCount) + ((longWordsCount * 100) / wordCount));
 return lixScore;
 }
 document.getElementById('lixButton').addEventListener('click', function() {
 var text = document.getElementById('inputLix').value;
 document.querySelector('#notification').textContent = calculateLix(text).toString();
 });
});

.tool-wrapper {
 background: #899398;
 padding: 30px;
 border-radius: 10px;
}
textarea {
 width: 100%;
}

<div class="tool-wrapper">
 <textarea id="inputLix" rows="5">This is just some basic text. Push the button to calculate the LIX value. And figure out how hard your text is to read.</textarea>
 <div class="clearfix">
 <button id="lixButton" class="alignright" type="submit">Calculate Lix</button>
 <div id="notification" class="alignright">You haven't performed any calculations yet</div>
 </div>
</div>

EDIT 06.09.2017 I Rewrote the JS based on all of your great comments. I didn't pick on a certain suggestion from the answers. I really wanted to do it in a way that I was able to fully grasp myself :) It most certainly is a lot less complex now. If I screwed up again or used other half-assed solutions. Please do let me know :D

Also ditched the jQuery.

document.addEventListener("DOMContentLoaded", function() {
 'use strict';
 function words(text) {
 return text
 .replace(/[-'.]/ig, "") // Ignores hyphens and apostrophes. Dots are here to avoid split on . in numbers.
 .split(/[^a-zA-ZæøåÆØÅ0-9]/g) // Can't use \W+ since I need to take into account danish character ÆØÅ
 .filter(Boolean);
 }
 function sentences(text) {
 var splitter = /\?|\!|\.|\n/g;
 var arrayOfSentences = text
 .split(splitter)
 .filter(Boolean);
 return arrayOfSentences;
 }
 function calculateLix(text) {
 var wordCount = words(text).length;
 var longWordsCount = words(text)
 .filter(function(wordsArray) {
 return wordsArray.length > 6;
 })
 .length;
 var sentenceCount = sentences(text).length;
 var lixScore = Math.round((wordCount / sentenceCount) + ((longWordsCount * 100) / wordCount));
 return lixScore;
 }
 document.getElementById('lixButton').addEventListener('click', function() {
 var text = document.getElementById('inputLix').value;
 document.querySelector('#notification').textContent = calculateLix(text).toString();
 });
});

.tool-wrapper {
 background: #899398;
 padding: 30px;
 border-radius: 10px;
}
textarea {
 width: 100%;
}

<div class="tool-wrapper">
 <textarea id="inputLix" rows="5">This is just some basic text. Push the button to calculate the LIX value. And figure out how hard your text is to read.</textarea>
 <div class="clearfix">
 <button id="lixButton" class="alignright" type="submit">Calculate Lix</button>
 <div id="notification" class="alignright">You haven't performed any calculations yet</div>
 </div>
</div>

END EDIT 06.09.2017

document.addEventListener("DOMContentLoaded", function() {
 'use strict';
 function words(text) {
 return text
 .replace(/[-'.]/ig, "") // Ignores hyphens and apostrophes. Dots are here to avoid split on . in numbers.
 .split(/[^a-zA-ZæøåÆØÅ0-9]/g) // Can't use \W+ since I need to take into account danish character ÆØÅ
 .filter(Boolean);
 }
 function sentences(text) {
 var splitter = /\?|\!|\.|\n/g;
 var arrayOfSentences = text
 .split(splitter)
 .filter(Boolean);
 return arrayOfSentences;
 }
 function calculateLix(text) {
 var wordCount = words(text).length;
 var longWordsCount = words(text)
 .filter(function(wordsArray) {
 return wordsArray.length > 6;
 })
 .length;
 var sentenceCount = sentences(text).length;
 var lixScore = Math.round((wordCount / sentenceCount) + ((longWordsCount * 100) / wordCount));
 return lixScore;
 }
 document.getElementById('lixButton').addEventListener('click', function() {
 var text = document.getElementById('inputLix').value;
 document.querySelector('#notification').textContent = calculateLix(text).toString();
 });
});

.tool-wrapper {
 background: #899398;
 padding: 30px;
 border-radius: 10px;
}
textarea {
 width: 100%;
}

<div class="tool-wrapper">
 <textarea id="inputLix" rows="5">This is just some basic text. Push the button to calculate the LIX value. And figure out how hard your text is to read.</textarea>
 <div class="clearfix">
 <button id="lixButton" class="alignright" type="submit">Calculate Lix</button>
 <div id="notification" class="alignright">You haven't performed any calculations yet</div>
 </div>
</div>

EDIT 06.09.2017 I Rewrote the JS based on all of your great comments. I didn't pick on a certain suggestion from the answers. I really wanted to do it in a way that I was able to fully grasp myself :) It most certainly is a lot less complex now. If I screwed up again or used other half-assed solutions. Please do let me know :D

Also ditched the jQuery.

document.addEventListener("DOMContentLoaded", function() {
 'use strict';
 function words(text) {
 return text
 .replace(/[-'.]/ig, "") // Ignores hyphens and apostrophes. Dots are here to avoid split on . in numbers.
 .split(/[^a-zA-ZæøåÆØÅ0-9]/g) // Can't use \W+ since I need to take into account danish character ÆØÅ
 .filter(Boolean);
 }
 function sentences(text) {
 var splitter = /\?|\!|\.|\n/g;
 var arrayOfSentences = text
 .split(splitter)
 .filter(Boolean);
 return arrayOfSentences;
 }
 function calculateLix(text) {
 var wordCount = words(text).length;
 var longWordsCount = words(text)
 .filter(function(wordsArray) {
 return wordsArray.length > 6;
 })
 .length;
 var sentenceCount = sentences(text).length;
 var lixScore = Math.round((wordCount / sentenceCount) + ((longWordsCount * 100) / wordCount));
 return lixScore;
 }
 document.getElementById('lixButton').addEventListener('click', function() {
 var text = document.getElementById('inputLix').value;
 document.querySelector('#notification').textContent = calculateLix(text).toString();
 });
});

.tool-wrapper {
 background: #899398;
 padding: 30px;
 border-radius: 10px;
}
textarea {
 width: 100%;
}

<div class="tool-wrapper">
 <textarea id="inputLix" rows="5">This is just some basic text. Push the button to calculate the LIX value. And figure out how hard your text is to read.</textarea>
 <div class="clearfix">
 <button id="lixButton" class="alignright" type="submit">Calculate Lix</button>
 <div id="notification" class="alignright">You haven't performed any calculations yet</div>
 </div>
</div>

END EDIT 06.09.2017