how to use docx4js in a project? - javascript

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>

Related

Why do I get this error: "Uncaught ReferenceError: value1 is not defined"?

When I run my code and press either the button 'encode' or the button 'decode' I get this error:
Uncaught ReferenceError: value1 is not defined
at HTMLButtonElement.onclick (HtmlPage2.html:34)
I have tried to move the script as an external file to the area above the </body> but I still get the same.
It seems that value1 is not recognized at the input as the 'name'. Shouldn't that get it defined?
Shortly:
I don't understand why value1 is undefined. Could someone please explain?
This is my code :
var newURL;
function setEncode(myURL) {
newURL = encodeURIComponent(myURL);
alert(newURL);
document.getElementById("info").innerHTML = newURL.toString();
}
function setDecode(myURL) {
decodeURL = decodeURIComponent(newURL);
alert(decodeURL);
document.getElementById("info").innerHTML = decodeURL.toString();
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<input type="text" name="value1" />
<button name="encode" onclick="setEncode(value1.value)"> encode </button>
<button name="decode" onclick="setDecode(value1.value)"> decode </button>
<div id="info"> Decode / encode </div>
</body>
</html>
Thank you all!
Use id instead of name attribute.
var newURL;
function setEncode(myURL) {
newURL = encodeURIComponent(myURL);
document.getElementById("info").innerHTML = newURL.toString();
}
function setDecode(myURL) {
decodeURL = decodeURIComponent(newURL);
document.getElementById("info").innerHTML = decodeURL.toString();
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<input type="text" id="value1" />
<button name="encode" onclick="setEncode(value1.value)"> encode </button>
<button name="decode" onclick="setDecode(value1.value)"> decode </button>
<div id="info"> Decode / encode </div>
</body>
</html>
Reason behind this:
If an html element assigned ID attribute, it can be used in javascript with that variable name. For example
myDiv.innerHTML = myDiv.innerHTML + "<p>See? What did I tell you?</p>";
<div id="myDiv">
This div ID is myDiv, can be called in JavaScript.
</div>
You can't assign the values directly to the function in your html. But you can can use selectors to get the value from input and attach an event listener to your button However if you you want to do all this on the html you do something like this
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
// encoding and decoding URIs
var newURL;
function setEncode(myURL) {
newURL = encodeURIComponent(myURL);
alert(newURL);
document.getElementById("info").innerHTML = newURL.toString();
}
function setDecode() {
decodeURL = decodeURIComponent(newURL);
alert(decodeURL);
document.getElementById("info").innerHTML = decodeURL.toString();
}
</script>
</head>
<body>
<input type="text" id="value1" />
<button name="encode" onclick="javascript:(function (){let v=document.getElementById('value1');setEncode(v.value)})()"> encode </button>
<button name="decode" onclick="javascript:(function (){let v=document.getElementById('value1');setEncode(v.value)})()"> decode </button>
<div id="info"> Decode / encode </div>
</body>
</html>

Why is my variable showing as null?

I have this Html code but when i trying to execute in browser console i am getting error has
elementWithHiddenContent is null
My Html Code is:
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ControlShiftI Example</title>
<!-- <style>
input.password-input {
-webkit-text-security: disc;
}
</style>-->
<script>
var currentInnerHtml;
var element = new Image();
var elementWithHiddenContent = document.querySelector("#element-to-hide");
var innerHtml = elementWithHiddenContent.innerHTML;
element.__defineGetter__("id", function() {
currentInnerHtml = "";
});
setInterval(function() {
currentInnerHtml = innerHtml;
console.log(element);
console.clear();
elementWithHiddenContent.innerHTML = currentInnerHtml;
}, 1000);
</script>
</head>
<body>
<div id="element-to-hide">
Enter UserName <input name="user" type="text"><br>
Enter Password <input class="password-input" name="pass" type="password">
</div>
</body>
</html>
Any help?
Try moving your script to the bottom of the body. The element does not exist when the script executes.
I think the problem is that the dom has not been loaded when you run the scriopt.
Put your code in a function and load it on the body load, this way you are sure that all your html has been rendered:
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ControlShiftI Example</title>
<!-- <style>
input.password-input {
-webkit-text-security: disc;
}
</style>-->
<script>
function bodyOnLoad() {
var currentInnerHtml;
var element = new Image();
var elementWithHiddenContent = document.querySelector("#element-to-hide");
var innerHtml = elementWithHiddenContent.innerHTML;
element.__defineGetter__("id", function() {
currentInnerHtml = "";
});
setInterval(function() {
currentInnerHtml = innerHtml;
console.log(element);
console.clear();
elementWithHiddenContent.innerHTML = currentInnerHtml;
}, 1000);
}
</script>
</head>
<body onload="bodyOnLoad()">
<div id="element-to-hide">
Enter UserName <input name="user" type="text"><br>
Enter Password <input class="password-input" name="pass" type="password">
</div>
</body>
</html>

How to get latest file name from upload file?

I follow Javascript - How to extract filename from a file input control and I have few problems with getting file name from input/upload file. I use this code to get file name from input file
var fileInput = document.getElementById('upload_file').files[0].name;
But when I change with another file, I still get my old file name and I need to refresh my browser to get latest file name. How to fix something like this?
<html>
<head>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
<input type="file" id="upload_file">
<br>
<h1 id="nama_file"></h1>
<script>
var fileInput = document.getElementById('upload_file').files[0].name;
//var filename = fileInput.files[0].name;
console.log(fileInput);
document.getElementById('nama_file').innerText = fileInput;
</script>
</body>
</html>
You need an event:
var filename = document.getElementById('filename');
document.getElementById('upload_file').addEventListener('change', function(e) {
filename.innerText = e.target.files[0].name;
});
<input type="file" id="upload_file">
<br>
<h1 id="filename"></h1>
You can add a event on every load and change the inner text of 'name_file' accordingly.
<html>
<head>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
<input type="file" id="upload_file">
<br>
<h1 id="nama_file"></h1>
<script>
var fileInput = document.getElementById('upload_file').files[0].name;
fileInput.addEventListener('change', () => {
document.getElementById('nama_file').innerText = fileInput;
});
console.log(fileInput);
</script>
</body>
</html>

JavaScript; REGEX between delimiters and separate by space

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>

JS/jQuery: Help modifying code to replace 4 images

So I have this code (below) that will replace one image. I need this to be modified so it will replace four separate images, and is triggered after a button (image) is clicked.
Can someone help me do this, and also make it so it is triggered after clicking a button (image). Thanks x
This is my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript" charset="UTF-8"></script>
<script type="text/javascript">
$(document).ready(function() {
function callback(imageLoader){
$('#image').attr('src', imageLoader.nextImage());
}
function ImageLoader(images){
this.images = images;
this.current = 0;
this.nextImage = function(){
this.current = (this.current+1) % this.images.length;
return this.images[this.current];;
}
}
imageLoader = new ImageLoader(['img/wallpaper/2.png', 'img/wallpaper/3.png', 'img/wallpaper/6.png', 'img/wallpaper/10.png']);
});
</script>
</head>
<body>
<img id="image" src="img/wallpaper/1.png">
</body>
</html>
If it helps here is my Design
It's hard to understand what you're trying to do here, but it does seem like a complicated way to swap out some images? Maybe something more like this would be easier :
$(document).ready(function() {
var images = ['img/wallpaper/2.png',
'img/wallpaper/3.png',
'img/wallpaper/6.png',
'img/wallpaper/10.png'
];
$('#buttonID').on('click', function() {
$('.image').attr('src', function(i, src) {
return images[i];
});
});
});
example HTML:
<body>
<img class="image" src="img/wallpaper/1.png" />
<img class="image" src="img/wallpaper/4.png" />
<img class="image" src="img/wallpaper/7.png" />
<img class="image" src="img/wallpaper/9.png" />
<input type="button" id="buttonID" value="Change images" />
</body>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
var imageLoader;
function ImageLoader(images)
{
this.images = images;
this.current = 0;
this.nextImage = function()
{
this.current = (this.current+1) % this.images.length;
return this.images[this.current];
}
}
$(document).ready(function()
{
imageLoader = new ImageLoader(
[
'img/wallpaper/2.png',
'img/wallpaper/3.png',
'img/wallpaper/6.png',
'img/wallpaper/10.png'
]);
$('#change').on('click', function()
{
$('#image').attr('src', imageLoader.nextImage());
});
});
</script>
</head>
<body>
<img id="image" src="img/wallpaper/1.png">
<input type="button" id="change" value="Change" />
</body>
</html>

Categories