Fatal编程技术网
  • javascript/
  • JavaScript错误地解析HTML输入值

JavaScript错误地解析HTML输入值

javascript java function parsing

JavaScript错误地解析HTML输入值,javascript,java,function,parsing,Javascript,Java,Function,Parsing,我正在创建一个HTML页面，我希望它能够让用户在文本框中键入的内容进入手动更新的URL 这是我的src <HTML> <head> <title> Signature Creator </title> </head> <body id="body"> <br> <!--<meta http-equiv="refresh" content="1">

我正在创建一个HTML页面，我希望它能够让用户在文本框中键入的内容进入手动更新的URL

这是我的src

<HTML>
<head>
    <title>
        Signature Creator
    </title>
</head>

<body id="body">
    <br>
    <!--<meta http-equiv="refresh" content="1">-->
    &nbsp;&nbsp;&nbsp;&nbsp;<input type="text" id="title" name="JacobSignatureCreatorTitle" placeholder="Title" width="10px"><br><br>
    &nbsp;&nbsp;&nbsp;&nbsp;<input type="text" id="subtitle" name="JacobSignatureCreatorSubTitle" placeholder="Subtitle" width="10px"><br><br>
    &nbsp;&nbsp;&nbsp;&nbsp;<input type="text" id="line1" name="JacobSignatureCreatorLineOne" placeholder="Line #1" width="10px"><br><br>
    &nbsp;&nbsp;&nbsp;&nbsp;<input type="text" id="line2" name="JacobSignatureCreatorLineTwo" placeholder="Line #2" width="10px"><br><br>
    &nbsp;&nbsp;&nbsp;&nbsp;<input type="text" id="line3" name="JacobSignatureCreatorLineThree" placeholder="Line #3" width="10px"><br><br>
    &nbsp;&nbsp;&nbsp;&nbsp;<input type="button" id="submit" onclick="getVariables()" value="Get 'err done!"><br><br>
    <br><br><br><br><br><br><center>
        <img id="photo">
    </center>
    <script>
        function getVariables() {
            if (document.getElementById("title").value == null) {
                var title = "";
            } else {
                var title = document.getElementById("title").value.toString;
            }
            if (document.getElementsByName('subtitle').value == null) {
                var subtitle = "";
            } else {
                var subtitle = document.getElementsByName('subtitle').value.toString;
            }
            var line1 = document.getElementsByName('line1').value;
            var line2 = document.getElementsByName('line2').value;
            var line3 = document.getElementsByName('line3').value;
            drawIframe();
        }

        function drawIframe() {
            document.getElementById("photo").src = "http://sig.bensdaman.com/v2/image.png?title=" + title + "&sub=" + subtitle + "&line1=" + line1 + "&line2=" + line2 + "&line3=" + line3;
        }
    </script>
问题在于变量的范围，它们是
getVariables（）
的局部变量。在
drawIframe
中，当您访问变量（如
title
时，它不是指在
getVariables（）
中创建的变量，而是指窗口对象的属性，元素的
id
s将作为窗口对象的属性（如全局变量）进行访问因此，当您在
drawIframe
中说
subtitle
时，它是指id为
drawIframe
的dom元素，其
toString（）
返回
[object htmlelementput]

因此，只需将变量作为参数传递给
drawIframe
like

function getVariables() {
    var title = document.getElementById("title").value;
    var subtitle = document.getElementById('subtitle').value;
    var line1 = document.getElementsByName('line1').value;
    var line2 = document.getElementsByName('line2').value;
    var line3 = document.getElementsByName('line3').value;
    drawIframe(title, subtitle, line1, line2, line3);
}

function drawIframe(title, subtitle, line1, line2, line3) {
    document.getElementById("photo").src = "http://sig.bensdaman.com/v2/image.png?title=" + title + "&sub=" + subtitle + "&line1=" + line1 + "&line2=" + line2 + "&line3=" + line3;
}

toString
是一种方法。您应该像这样使用它
toString（）
toString
在这里不是必需的，
document.getElementById（“title”）.value
本身将生成该值。您得到的错误是什么？至于现在，我发现您正试图从
drawIframe（）
方法中访问
getVariables（）
方法中声明的局部变量。@Kesavan我尝试了类似于document.getElementById（“title”）.toString（）的方法，但效果不错。@Kesavan我没有收到任何错误。因为它将[object HTMLElementInput]作为字符串而不是文本框中的内容返回。请注意，因为
document.getElementById（“title”）.value
将抛出错误（没有具有该ID的元素，因此尝试访问null的value属性）或返回字符串，然后
document.getElementById(“title”）.value==null
将始终为false，因此仅执行else分支。 
function getVariables() {
    var title = document.getElementById("title").value;
    var subtitle = document.getElementById('subtitle').value;
    var line1 = document.getElementsByName('line1').value;
    var line2 = document.getElementsByName('line2').value;
    var line3 = document.getElementsByName('line3').value;
    drawIframe(title, subtitle, line1, line2, line3);
}

function drawIframe(title, subtitle, line1, line2, line3) {
    document.getElementById("photo").src = "http://sig.bensdaman.com/v2/image.png?title=" + title + "&sub=" + subtitle + "&line1=" + line1 + "&line2=" + line2 + "&line3=" + line3;
}