JavaScript; REGEX between delimiters and separate by space - javascript

I have this code:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
window.onload = function() {
var e = document.getElementById("first"), n=document.getElementById("second");
e.addEventListener("input", function() {
n.value = e.value.match( /\<span class="my_class">(.+)\<\/span>/ )[1]
})
};
</script>
</head>
<body>
<input class="textfield" id="first"><br><br>
<input class="textfield" id="second">
</body>
</html>
When you insert <span class="my_class">test</span> in first field, second field will output test. This is exactly what I want.
But if I insert e.g. <span class="my_class">test</span> some text<span class="my_class">hello</span> I'm getting test</span> some text<span class="my_class">hello instead of test hello (separated by a space).
What am I doing wrong?


Use jquery construct to parse the HTML and get the value inside the markup span
DEMO
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<script>
window.onload = function() {
var e = document.getElementById("first"),
n = document.getElementById("second");
e.addEventListener("input", function() {
var valueArr = [];
$(e.value).each(function(v, i) {
if (i.nodeName == "SPAN" && i.classList.contains( "my_class" ) ) {
valueArr.push($(i).text());
}
});
n.value = valueArr.join(" ");
})
};
</script>
</head>
<body>
<input class="textfield" id="first"><br><br>
<input class="textfield" id="second">
</body>
</html>

Related

how to use docx4js in a project?

Hello i've been tryng to use this library docx4js https://www.npmjs.com/package/docx4js to convert a docx document to html,this is my code, when i try to upload a document i get undefined,....i can't find any examples on this,...can someone help me?
<!DOCTYPE html>
<html>
<head>
<script src="docx4js.js"></script>
<script>
var Docx = require("docx4js");
let val = "";
let element;
function test(input) {
val = input.files[0];
Docx.docx.load(input.files[0]).then(function (docx) {
element = docx.render();
document.querySelector("#docx").innerHTML = element;
console.log(element);
console.dir(element);
});
}
</script>
</head>
<body>
<input
type="file"
style="position: absolute; top: 0"
onchange="test(this)"
/>
<br />
<br />
<textarea id="text"></textarea>
<div id="docx"></div>
</body>
</html>

How do I output a string from a textbox in javascript?

I am working on a pyg-llatin translator but all im trying to do at this stage is get it to change the text of whats inside the p tag to what is typed in the textbox but when I press the button nothing happens.
HTML:
var word
function translateWord() {
getWord();
outputWord();
alert("test");
}
function getWord() {
word = Document.getElementById("wordIn").value
}
function outputWord() {
Document.getElementById("wordOut").innerHTML = word;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Pig Latin Translator</title>
</head>
<body>
<script src="JS/Translator.js"></script>
<h1>Pig Latin Translator</h1>
<br>
<form>
<input type="text" id="wordIn">
<button type="button" name="Translate" onclick="translateWord()">Translate</button>
<p id="wordOut">-</p>
</form>
<br>
</body>
</html>

Document is the class that document is an instance of, they are not the same though.
console.log(document === Document) // => false
console.log(document instanceof Document) // => true
With that changed, your code works:
var word
function translateWord() {
getWord();
outputWord();
alert("test");
}
function getWord()
{
word = document.getElementById("wordIn").value
}
function outputWord()
{
document.getElementById("wordOut").innerHTML = word;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Pig Latin Translator</title>
</head>
<body>
<script src="JS/Translator.js"></script>
<h1>Pig Latin Translator</h1>
<br>
<form>
<input type="text" id="wordIn">
<button type="button" name="Translate" onclick="translateWord()">Translate</button>
<p id="wordOut">-</p>
</form>
<br>
</body>
</html>

you replace your translateWord() function to this as:
function translateWord() {
document.getElementById("wordOut").innerHTML = document.getElementById("wordIn").value;
}

var word
function translateWord() {
getWord();
outputWord();
alert("test");
}
function getWord()
{
word = document.getElementById("wordIn").value
}
function outputWord()
{
document.getElementById("wordOut").innerHTML = word;
}

How do I output a variable from Javascript to html?

I want to inject text into a div using a variable. Here's a Stack Snippet of my code:
tDNA() {
var dna = prompt("Enter the DNA: ");
}
document.getElementById("dna").innerHTML = "DNA: " + dna;
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<src="main.js">
<div id="dna"></div>
</body>
</html>
function promp

You need to import your script like this
<script type="text/javascript" src="main.js"></script>

You can try this out.
HTML
<html>
<head>
</head>
<body>
<script defer src = "main.js"></script>
<div id = "dna">
<p></p>
</div>
</body>
</html>
JavaScript
function promptDNA(){
var dna = prompt("Enter the DNA: ");
d1 = document.querySelector("p");
d1.textContent = dna;
}
promptDNA();

Like this, you have to add the data to the HTML where the variable dna is in scope and then actually call the function
function promptDNA(){
var dna = prompt("Enter the DNA: ");
document.getElementById("dna").textContent = "DNA: " + dna;
}
promptDNA()
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="dna"></div>
<script src="main.js"></script>
</body>
</html>
Also, you're importing your script improperly.

JavaScript: innerHtml to change 'display' from '1' to '0' no errors on console

HTML File
<!DOCTYPE Html>
<html>
<head>
<script type= "text/javascript" src= "calc.js"></script>
</head>
<body>
<h1> Calculate away </h2>
<div id='display'>
<p>1</p>
</div>
</body>
</html>
JS File
document.addEventListener('DOMContentLoaded', turnOn)
function turnOn ()
{
document.getElementById('display').innerHtml = "`<p>0</p>`";
}

innerHTML is the correct name.
document.addEventListener('DOMContentLoaded', turnOn)
function turnOn () {
document.getElementById('display').innerHTML = "<p>0</p>";
}

Change document.getElementById('display').innerHtml to document.getElementById('display').innerHTML

Use document.querySelector just to replace the text of the p tag .
document.addEventListener('DOMContentLoaded', turnOn)
function turnOn() {
var getPElement = document.querySelector("#display p")
getPElement.innerHTML = 0;
}
<h1> Calculate away </h2>
<div id='display'>
<p>1</p>
</div>

Reading image filenames from spans

I want to have an Image Slider which reads Image names from spans. What's wrong with my code? Even the alert command not executed. How to fix this?
<html><head>
<title></title>
<script src="Default.aspx_files/jquery-1.js" type="text/x-jquery-tmpl"></script>
<script src="Default.aspx_files/General.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
jQuery(function () {
var i = 0;
var banner = $('.imagesContainer span').map(function () {
return $.trim($(this).text())
}).get();
function fun() {
//How to init array here from inner text of spans?
i++;
if (i == banner.length) {
i = 0;
}
$('#img1').attr('src', '/slide/' + banner[i]);
alert('/slide/' + banner[i]);
}
setInterval(fun, 1000);
})
</script>
</head>
<body>
<form method="post" action="Default.aspx" id="form1">
<div class="imagesContainer">
<span>
73defe4b-9819-4e12-b351-3813686e0c83.gif
</span>
<span>
4c2ed116-500d-42ad-8aa5-983bf214d5d3.png
</span>
</div>
</form>
</body></html>

Its not that you didn't know but it worked on a change of type="text/x-jquery-tmpl" to text/javascript in your jquery inclusion.

Categories