Question

如上所述，我无法在每次用户输入textarea时调用myfunction（）onchange，它应该在每次输入时更改图像

任何人都可以请求帮助，我是html和javascript的新手。我只需要将图像更改为人们在文本区域中键入的内容。

 <!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml"
  xmlns:h="http://xmlns.jcp.org/jsf/html"
  xmlns:f="http://xmlns.jcp.org/jsf/core"
  xmlns:p="http://xmlns.jcp.org/jsf/passthrough" lang="us">

<head>
<meta charset="utf-8">
<title>〈Magnetic〉writesomething</title>
<link href="jquery-ui.css" rel="stylesheet">
<style>

body{
    font: 62.5% "Trebuchet MS", sans-serif;
    margin: 50px;
}
html, body {
height: 100%;
}

html {
display: table;
margin: auto;
}

body {
display: table-cell;
        padding: .8em 2em .8em 20px;

}
.image { 
   position: relative; 
   width: 100%; /* for IE 6 */
}

h2 {
position: relative;
top: 80px;
left: 360px;
width: 200px;
height: 90px;
color:#FFFFFF;
font-size:36px;
margin: 0 auto;

}
h4 {

width: 600px;


}

img {
width: 100%;
height: auto;
z-index:-1;
}

div.relative {
position: relative;
left: 20px;
border: 3px solid #8AC007;
}

#container {
width:600px;
height:350px;

 position: relative;
}
#image {
position: absolute;
left: 0;
top: 0;
width:100%;
height: auto;
}
#text {
 z-index: 100;
 position: absolute;
 color: white;
 font-size: 22px;
 font-weight: bold;
 left: 250px;
 top: 80px;
}

</style>


</head>

<body>
<div id="fb-root"></div>

<div class="container">

    <h1 class="container">〈Magnetic〉writesomething</h1>

    <div style="display: block;">
    <div id="imgDiv" class="image">

 <img src="http://game.magnetic.hk/image.php?text=writesomething
  " />
  <p id="display"></p>
  </div>


</div>

    <p>Write something：</p>
<form action="image.php" method="post" name="myform">

      <textarea style="width:600px;" name="text" id="inputtext"     onChange="myFunction()" placeholder="上限為16個字">中秋祝你乜乜乜</textarea></br>    </br>


</form>



</div>

<script src="jquery-1.8.3.js"></script>

<script type="text/javascript">
      function myFunction() {
var x = document.getElementById("inputtext").value;
document.getElementById("display").innerHTML = x;

 document.getElementById('imgDiv').innerHTML='<img src=\'http://game.magnetic.hk/image.php?text='+ document.getElementById("display").innerHTML +'\'>'

}

</script>

</body>
</html>

Answer 1

用这个替换你的代码行。并在关闭图像标记后检查最后一个元素。同一段应该在那里。

document.getElementById('imgDiv').innerHTML = '<img src=\'http://game.magnetic.hk/image.php?text=' + document.getElementById("display").innerHTML + '\'><p id="display"></p>'

Answer 2

使用document.getElementById('imgDiv').innerHTML时，请删除<p id="display"></p>。

如果您更换

document.getElementById('imgDiv').innerHTML='<img src=\'http://game.magnetic.hk/image.php?text='+ document.getElementById("display").innerHTML +'\'>'

由：

document.getElementById('imgDiv').innerHTML='<img src=\'http://game.magnetic.hk/image.php?text='+ document.getElementById("display").innerHTML +'\'><p id="display"></p>'

它应该工作。你可以尝试here。

Answer 3

因为您每次用户输入时都提到过，我发现您正在使用jQuery。

试试这样。

- 更新 -

没有意识到文字没有出现。

$("#inputtext").on("keydown", myFunction);

function myFunction() {
    var x = $(this).val();
    console.log(x);
    $("#display").text(x);

    $('#imgDiv > img').attr('src', 'http://game.magnetic.hk/image.php?text=' + x);

}

JSFiddle

- 编辑 -

Answer 4

@Elie Gnrd的回答解释了为什么你的代码被破坏了。

由于您正在使用jQuery，因此请使用其选择器和绑定。

将您的脚本修改为

$('#inputtext').on('input', function () {
    var x = $("#inputtext").val();
    $("#display").html(x);
    $('#imgDiv').html('<img src=\'http://game.magnetic.hk/image.php?text=' + x + '\'>');
});

然后，从textarea中删除onChange属性

在这里查看工作小提琴.. https://jsfiddle.net/sachin_puthran/h2c06fjx/

html onchange textarea只调用function（）一次。当文本改变时，图像不会改变

4 个答案: